I'm blocked by a question, on some Android device, I type some emoji and save them to database.Then load them and display in html page, but the emoji is invisible if set a font-weight: bold.If set font-weight: normal can display.
How does css font-weight work?
How does the browser parse CSS when it sees font-weight:bold or font-weight:normal?
System will call a bold font file (e.g., see Google Fonts which will list different weights of a font family) and if you don't have that font file on your device, it will fail to display the characters (actually for regular characters system tend to load a similar font in this case, but emoji characters are not regular).
You can include webfonts and contain the bold family in <head> section. E.g.,
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
Related
Do i need to use both rel="preload" and font-display="swap". Since rel="preload" prefetches the required font, is it necessary to add font-display attribute too?
<link rel="preload stylesheet" href="https://fonts.googleapis.com/css2?family=Magra&display=swap" as="font">
It depends on the intended result.
With font-display: swap, text is immediately rendered using the fallback typeface specified in your font stack while the request is made for your font. The fallback is whatever system font comes next in your font stack as listed in your font-family property.
Once the font is downloaded, it will be swapped in for the fallback.
This is just one option and you don't need to use it. For example, the immediate rendering of text when using font-display: swap creates a flash of unstyled text (FOUT) for the user and possible shifts in layout when the fonts swap, which can be undesirable.
You could opt for font-display: fallback, which attempts to account for this by hiding any text on screen for the first 100ms, optimistically hoping that your font downloads in that time frame.
If your font downloads within the first 100ms, it gets applied to the first visible text shown to the user (no FOUT).
If not, at 100ms the text gets rendered with the fallback typeface and the same pattern as font-display: swap resumes with your font getting swapped in once it eventually downloads.
From the page source I can see there are two references to fonts.googleapis.com
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,300,400,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css' />
but while page load there are lot of .woff2 file loading from http://fonts.gstatic.com/
I want to know why this is happening?
When you look inside the referenced CSS files, you will see there are multiple font-faces defined. This is what the URL was requesting. A query like Open+Sans:400italic,600italic,700italic,300,400,600,700 means, give me Open Sans in
400 italic
600 italic
700 italic
300 normal
400 normal
600 normal
700 normal
The numbers mean font weight.
So only the first CSS file already escalates to 7 font-styles.
The second CSS file has mostly the same fonts defined. Only 3 of them are not covered in the first file. This should sum up to 10 different font-styles.
Open Sans has a lot of script extensions available:
Cyrillic Extended (cyrillic-ext)
Latin (latin)
Greek Extended (greek-ext)
Greek (greek)
Vietnamese (vietnamese)
Latin Extended (latin-ext)
Cyrillic (cyrillic)
To cover all those combinations, Google creates font-style * script font-face definitions, which results into 70 font-faces each with a different font file (in case of Google Chrome woff2).
To reduce the number of files:
Make sure you need all those font-styles. You really need all those different font-weights?
Do you need all the extensions? If you will never display vietnamese or cyrillic characters you do not need to load those fonts.
Both can be individually selected on the Use page of Open Sans.
I am already using a font from google, and it works as expected :
#font-face {
font-family: 'Chivo';
font-style: normal;
font-weight: 900;
src: local('Chivo Black'), url(http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
Now I need another font from google and I don't know where to pick that url. The only url I can see on google fonts is (e.g for this font) is:
<link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
But the googleapis url does not work, if I replace the src with that url no font is loaded.
To locate all of the Google fonts you can go here:
http://www.google.com/fonts
Using # font-face with google fonts is not recommended...
They will (and should) host all of the "google" fonts for you. Having you host them in a new location is simply bad form... If another user visited a site with the same font, but served up form google, they would have to do a new server call to YOUR location...rather than use the cashed version google has.
To use multiple fonts, place a pipe character (Shift + Backslash = | ) in between the names in the link tag:
<link href='http://fonts.googleapis.com/css?family=Audiowide|Exo+2|Rambla|Scada' rel='stylesheet' type='text/css'>
And then to your font family tags can call the appropriate fonts as needed:
font-family: 'Audiowide', cursive;
font-family: 'Exo 2', sans-serif;
font-family: 'Rambla', sans-serif;
font-family: 'Scada', sans-serif;
You code only works for browsers that support WOFF for downloadable fonts. This is a direct consequence of just ripping off some code sent by the Google server to some browser. The Google server sends different CSS code to different browsers, and your code breaks this. Moreover, there is no guarantee that the URLs will keep working. URLs like
http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff should not be expected to be stable, and Google has made no statement about supporting the use of such URLs.
You can proceed with the rip-off strategy, with its drawbacks, by simply viewing, in your browser, the CSS code of a page. For example, on Firefox, you could use the Web Developer Extension, which has a command for viewing all CSS files for a page. Then you would copy the content of the relevant CSS file.
A better approach—assuming you don’t want to use fonts as hosted by Google—is to download the font files from Google (the Google Web Fonts pages have an interface for that, too, though they keep telling you don’t need to use it) and then generate the various font formats and a CSS file e.g. with FontSquirrel WebFont Generator. The results may differ from those you get by using Google-hosted fonts; Google does not disclose exactly how their font files have been generated.
I'm using Open Sans font from Google Fonts on one of my page, and altho I'm using almost the same style regarding the font as Google does, my diacritics are somewhat thicker than the rest of the letters:
(you can see the live version at www.cabsurf.com)
The only difference in my CSS is the way I declare the font family:
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
But it will look the same even if I leave only Open Sans in the declaration.
I've placed the same text in Google Fonts page above (using inspect element in Chrome) and the text is rendered correctly on their side, so I know the font is ok.
Any idea what am I doing wrong ?
EDIT:
Using Chrome 27 / Firefox 22 on MacOS X 10.8.4
Google will use any sub-set of the font it wants. Did you make sure to check the correct boxes when you got the code for it?
When I append <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300&subset=latin,cyrillic-ext,cyrillic,latin-ext' rel='stylesheet' type='text/css'>to your <head>, all the characters look correct.
Just make sure to check whichever sub-sets you need so you don't get unnecessarily large files.
I'm doing a Photoshop-to-XHTML conversion, and the website designer used the Myriad Pro Semi-bold font which looks good in the photoshop file, but when I try the semi-bold option in CSS, it looks pretty much like a normal bold font, which is too bold for my purpose. Is there a way to achieve a nicer looking semi-bold font in HTML and CSS or am I just stuck with 'font-weight: 600;'?
In CSS, for the font-weight property, the value: normal defaults to the numeric value 400, and bold to 700.
If you want to specify other weights, you need to give the number value. That number value needs to be supported for the font family that you are using.
For example you would define semi-bold like this:
font-weight: 600;
Here an JSFiddle using 'Open Sans' font family, loaded with the above weights.
The practical way is setting font-family to a value that is the specific name of the semibold version, such as
font-family: "Myriad pro Semibold"
if that’s the name. (Personally I use my own font listing tool, which runs on Internet Explorer only to see the fonts in my system by names as usable in CSS.)
In this approach, font-weight is not needed (and probably better not set).
Web browsers have been poor at implementing font weights by the book: they largely cannot find the specific weight version, except bold. The workaround is to include the information in the font family name, even though this is not how things are supposed to work.
Testing with Segoe UI, which often exists in different font weight versions on Windows systems, I was able to make Internet Explorer 9 select the proper version when using the logical approach (of using the font family name Segoe UI and different font-weight values), but it failed on Firefox 9 and Chrome 16 (only normal and bold work). On all of these browsers, for example, setting font-family: Segoe UI Light works OK.
For me the following works good. Just add it. You can edit it as per your requirement. This is just a nice trick I use.
text-shadow : 0 0 0 #your-font-color;
font-family: 'Open Sans'; font-weight: 600; important to change to a different font-family
By mid-2016 the Chromium engine (v53) supports just 3 emphasis styles:
Plain text, bold, and super-bold...
<div style="font:normal 400 14px Arial;">Testing</div>
<div style="font:normal 700 14px Arial;">Testing</div>
<div style="font:normal 800 14px Arial;">Testing</div>
Select fonts by specifying the weights you need on load
Font-families consist of several distinct fonts
For example, extra-bold will make the font look quite different in say, Photoshop, because you're selecting a different font. The same applies to italic font, which can look very different indeed. Setting font-weight:800 or font-style:italic may result in just a best effort of the web browser to fatten or slant the normal font in the family.
Even though you're loading a font-family, you must specify the weights and styles you need for some web browsers to let you select a different font in the family with font-weight and font-style.
Example
This example specifies the light, normal, normal italic, bold, and extra-bold fonts in the font family Open Sans:
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,400i,600,800">
<style>
body {
font-family: 'Open Sans', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div style="font-weight:400">Didn't work with all the fonts</div>
<div style="font-weight:600">Didn't work with all the fonts</div>
<div style="font-weight:800">Didn't work with all the fonts</div>
</body>
</html>
Reference
(Quora warning, please remove if not allowed.)
https://www.quora.com/How-do-I-make-Open-Sans-extra-bold-once-imported-from-Google-Fonts
Testing
Tested working in Firefox 66.0.3 on Mac and Firefox 36.0.1 in Windows.
Non-Google fonts
Other fonts must be uploaded to the server, style and weight specified by their individual names.
System fonts
Assume nothing, font-wise, about what device is visiting your website or what fonts are installed on its OS.
(You may use the fall-backs of serif and sans-serif, but you will get the font mapped to these by the individual web browser version used, within the fonts available in the OS version it's running under, and not what you designed.)
Testing should be done with the font temporarily uninstalled from your system, to be sure that your design is in effect.