When I`ve used this quotes «» in html text, they was different:
I have changed font generated in font-squirrel to same font from google cdn. On my PC quotes became normal in all browsers, on backend developer`s computer they still different(even after hard page reload in different browsers).
What can we do for solving this?
Html example(header from picture):
<div class="block-title font22">
Строительство ТРК «Лукьяновка» идет согласно плану.
</div>
Css:
.font22 {
font-family: 'Roboto';
font-weight: 400;
line-height: 1.1em;
font-size: 22px;
}
.block-title {
margin-top: 0.6em;
max-height: 2.3em;
overflow: hidden;
}
Google font:
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
If your document is using this charset:
<meta charset="utf-8" />
Then you should be able to use (consistently across browsers) these marks “ would be “ & ” would be ”. Single quotes would be ‘ and ’.
Related
My website includes both English and Japanese characters. The problem is that although they are defined in the same class, they look as if they are different sizes in certain environments. For example, it appears fine on my laptop in Chrome browser, but on my desktop in Chrome browser and in my iphone in Safari browser, the English text appears smaller than the Japanese text.
Below is a snippet of my code:
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
p,
fieldset,
table {
/*so things don't run into each other*/
margin-bottom: 1em;
}
* {
font-size: 14px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
}
#container-right {
width: 490px;
float: right;
}
p {
font-family: Libre Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 20px;
font-display: block;
vertical-align: top;
}
html {
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"html://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="css.css" media="screen, projection, print" />
<link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/services/homepage/commercial.css" />
</head>
<body>
<div id="container-right">
<p>Brown准教授、</p>
</div>
</body>
</html>
Changing the Japanese characters to a different, Japanese language-specific p style had no affect.
The language of the html file is set to "ja," but changing it to English had no affect as well.
Please help!
Sincerely,
Hanako
Solution 1
Select a font that supports both English and Japanese text. This way your text will always be the same height for your text. However, English in these fonts may be quite ugly.
Solution 2
The following steps is under the assumption that Japanese is your primary language on your page and English is secondary. Reverse the instructions below if the opposite is true.
Make sure you load a Japanese and English font into your CSS/HTML. For example, load them from
https://fonts.google.com/
https://fonts.adobe.com/
Your own fonts using https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts#web_fonts
Wrap all of your English text in <span class="english-text"></span>.
For your overall text, set your font family to your Japanese font.
For your .english-text class, set your font family to your English font.
Manually pick font sizes to match English and Japanese.
Explanation
This problem is because the browser cannot find a matching font from your font-family property to render Japanese text. On my Windows Chrome computer, Chrome renders the English text as Garamond but the Japanese text as Yu Gothic.
It seems that when Chrome (and perhaps other browsers as well), despite explicitly specifying font-size: 14px, Chrome will choose an appropriate font size for the different font.
To see the rendered font for some text on Chrome,
inspect the text (by right-clicking and selecting Inspect in the context menu)
Go to the "Computed" styles tab.
Scroll to the bottom to see "Rendered Fonts".
I used SourceSansPro to match the font in design, FF, Safari seem ok. Chrome and IE 11 have issue.
Here is the design for the font (due to proxy, cannot upload, but have a look at FF and Safari)
Here is code:
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet"
type="text/css"
/>
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: "SourceSansPro", Helvetica, Arial, sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>
It seems the bold is quite different in IE and Chrome.
In summary, need to make the font style in IE and Chrome, same as FF and Safari.
By default, the code you're using there only include the 400-weight font, and browsers have different reactions when trying to get a bold version of a lighter font - some make it bold themselves, or just load a different font. In order to load the font weights you want (along with italic versions), you can use a line like this:
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&display=swap" rel="stylesheet">
With the versions/weights separated with commas.
If you go to the Google Font page for this, you can click "Customize" to select which fonts to include, and it'll generate the embed code for you.
You can use this code
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet" type="text/css" />
<style>
.fontStyle {
font-style: normal;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
color: #000;
font-weight: 500;
}
</style>
</head>
<div class="fontStyle">
Drop a file here
</div>
</html>
I was developing a simple website in Hungarian language, where special characters like: á, é, ű, ő etc are included in the text (head and body), and it worked perfectly in all browsers when opened from local. Once I uploaded the index.php file to the domain all special characters are displaying wrongly (like small pictures/icons). Page is done on bootstrap
I've tried changing the font-family, changed default language from en to hu, no improvement. Searched for answers already, but can't find what is wrong in my case
<!DOCTYPE html>
<html lang="hu">
<head>
<title>Vállalati oldal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
color: #818181;
}
h2 {
font-size: 24px;
text-transform: uppercase;
color: #303030;
font-weight: 600;
margin-bottom: 30px;
}
h4 {
font-size: 19px;
line-height: 1.375em;
color: #303030;
font-weight: 400;
margin-bottom: 30px;
}
.jumbotron {
background-color: #e3e7e8;
color: #fff;
padding: 100px 25px;
font-family: Montserrat, sans-serif;
}
I am getting no errors
I found what the root cause was. First I started with checking if my fonts were supporting special characters (although I would expect strange signs if font would not support already on local). Everything was ok there. Naturally I tried to change fonts for different ones also supporting local language but- no luck.
Then I started to think that either there needs to be sth wrong at my hosting side- so when I upload the page to domain or with the uploading process itself.
Issue came to be with the uploading process. I am using filezilla for upload of my index.php file and all other files. It came that when I am setting up a connection I needed to do two things:
1. check the option: Force UTF-8 in the charset tab while setting up the connection
2. once connection is set up and before files are uploaded right click in the connection established part of filezila and choose "enter custom command" once small window pops up I put in there a "opts utf-8 on" command, then I got the success message in the main window
After all this I have uploaded my files and everything worked perfectly. All special characters are displayed!
I am developing an application that uses a webview for the primary interface. Upon startup, the program loads a page that is included in the Content directory of the project, complete with external style sheets and scripts and they all load properly. The code to load is:
webViewer.Navigate(new Uri("ms-appx-web:///Content\\landing.html"));
And the content of landing.html is as follows. It all works properly.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<base href="ms-appx-web://58377ramsays.studios.chordwriter/Content/" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<title></title>
</head>
<body>
...
</body>
</html>
A problem has arisen when I try to use NavigateToString() to load rendered content into the viewer and try to use these style sheets, and specifically FontAwesome. I am loading the file using this code:
webViewer.NavigateToString(song.RenderHtml(appSettings));
And the RenderHtml() function looks partially like this:
string content = #"<DOCTYPE html>
<html>
<head>
<base href=""ms-appx-web://58377ramsays.studios.chordwriter/Content/"" />
<link rel=""stylesheet"" type=""text/css"" href=""css/font-awesome.min.css"" />
<style type=""text/css"">
body { font-family: Tahoma, Geneva, sans-serif;
margin: 15px;
font-size: " + settings.Values["settingsFontSize"] + #"pt; }
span.flat { margin: -4px -2px;
font-family: 'Lucida Sans Unicode','Lucida Grande',sans-serif;
font-size: 1.2em;
height: 0.9em;
display: inline-block; }
h3 { font-size: 1.5em; }
th a { text-decoration: none;
font-weight: bold;
color: #127690; }
td a { text-decoration: none;
font-weight: normal;
color: #000; }
i { color: #000;
width: 1em; }
</style>
</head>
<body>";
// Rest of rendering function.
However I cannot seem to get FontAwesome to load properly. As far as I can tell the font-awesome.min.css is loading properly, because the icons' i tags are the right size (square blocks) but they are blank, meaning the font file is not being loaded. I tried using the <base> tag but that does not seem to work. Is there any way to make this work?
Edit: I edited the stylesheet and hardcoded the full url of the font file into it, and it still doesn't work.
It seems that you may need to use the BuildLocalStreamUri / NavigateToLocalStreamUri. In this case, the string-passed html can't refer the contents of css folder. You need to build the 'stream' that contains string, css, or other external files.
Following is an api reference:
BuildLocalStreamUri
You may need to refere the sample also. It's complicated to use.
XAML WebView control sample
I'm using these google fonts in my web page (I'm also using Bootstrap - don't know if that changes anything, I'm kinda new to this coding thing):
.initial {
font-size: 1.5em;
font-family: 'Euphoria Script', cursive;
}
p {
font-family: 'Open Sans', sans-serif;
}
<html><head>
<link href='https://fonts.googleapis.com/css?family=Euphoria+Script&subset=latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext' rel='stylesheet' type='text/css'></head>
<body>
<p><span class="initial">S</span>ome text here. And some more. We seriously need a lot of text.</p>
</body>
</html>
Problem is that, since the euphoria font is taller, when the line breaks there's more space between the first line and the second than between all the other lines. Is there some workaround? I don't care if the text is near the initial or indented.
Thanks!
Consider using float: left (+ first-letter selector if you don't care with supporting old browsers:
p:first-letter {
font-size: 1.5em;
float: left;
padding-right: 5px;
padding-bottom: 5px;
color: red;
}
See http://jsfiddle.net/zr8qarw9/
Specify the line height on your text, so all text will have the same height despite the difference in the font size. Try this:
.initial {
font-size: 1.5em;
font-family: 'Euphoria Script', cursive;
}
p {
line-height: 1.2em;
font-family: 'Open Sans', sans-serif;
}
<html><head>
<link href='https://fonts.googleapis.com/css?family=Euphoria+Script&subset=latin-ext' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext' rel='stylesheet' type='text/css'></head>
<body>
<p><span class="initial">S</span>ome text here. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text. And some more. We seriously need a lot of text.</p>
</body>
</html>