google-webfonts | 易学教程

Should I locally store CSS generated by the Google Web Fonts API?

阅读更多关于 Should I locally store CSS generated by the Google Web Fonts API?

问题 I am using some Google Web Fonts. I hear that Google deal with all the issues between different browsers and serve different media depending on the browser in the request header. My question is, at what point does it do this? Reason being is that for the API you can simply include a CSS file which contains the @font-face request. Can I simply include that CSS in my own CSS file, thereby saving a HTTP request, or does that CSS change depending on the browser that requests it? I really hope

Web Fonts not working in some Firefox (including Google Fonts Sample Page)

阅读更多关于 Web Fonts not working in some Firefox (including Google Fonts Sample Page)

问题 Firefox 21v, Windows 7 32Bit We are about to use Google Fonts for an upcoming project. We've found two computers with Firefox which doesn't display any web fonts at all.(Chrome display them correctly) All our computers has Firefox 21.0 version. Seems it's something related to the OS or Firefox dependency. Is this known bug for Firefox? (Assuming the Google Fonts page has correct css rules for embeded font) 回答1: Replace the default protocol http:// with https:// - it worked for me. 来源： https:/

How to combine Google Fonts imports

阅读更多关于 How to combine Google Fonts imports

问题 I am using Wordpress with the Divi theme, There is this code: function et_divi_fonts_url() { $fonts_url = ''; /* Translators: If there are characters in your language that are not * supported by Open Sans, translate this to 'off'. Do not translate * into your own language. */ $open_sans = _x( 'on', 'Open Sans font: on or off', 'Divi' ); if ( 'off' !== $open_sans ) { $font_families = array(); if ( 'off' !== $open_sans ) $font_families[] = 'Open+Sans:300italic,400italic,700italic,800italic,400

Combinations of letters “fi” and “fl” is not displayed by browsers

阅读更多关于 Combinations of letters “fi” and “fl” is not displayed by browsers

问题 I have the following problem: for my website I chose webfont 'Fira Sans Condensed' from Google Fonts (Latin, Latin Extended, Cyrillic, Cyrillic Extended). For generating font formats I have used Font Squirrel , which generated for me files with .woff and .woff2 extensions. I include font with next css-code: @font-face { font-family: 'firasanscondensed'; font-style: normal; font-weight: 400; src: url('../fonts/firasanscondensed-regular.woff2') format('woff2'), url('../fonts/firasanscondensed

PHP How to remove duplicate value in multidimensional array and merge others

阅读更多关于 PHP How to remove duplicate value in multidimensional array and merge others

问题 I've spend couple of hours on this problem. I have a multidimension array with fonts details and I want to merge it to send one request to google web fonts. (Each array describe font details of different html tag) Anyone can help me with that? Input: Array ( [1] => Array ( [family] => Abril Fatface [weight] => regular [charset] => latin,latin-ext ) [2] => Array ( [family] => Akronim [weight] => regular [charset] => latin ) [3] => Array ( [family] => Akronim [weight] => regular, bold [charset]

Get Raleway lining numerals for system font usage

阅读更多关于 Get Raleway lining numerals for system font usage

问题 We'd like to use Raleway on our PCs but the numerals are by default jittered. The description says it's achievable to get the lining versions that are all horizontally aligned. I've found this SO question that details how to get the lining version via CSS but does anyone know how to get it in a download? 回答1: You can use the Expert mode on http://www.fontsquirrel.com/tools/webfont-generator with OpenType flattening to generate a new font with lining numerals turned on. Additionally, you could

Properly defining font-family in @font-face CSS rules

阅读更多关于 Properly defining font-family in @font-face CSS rules

问题 I recently came across the @font-family CSS rule as I was looking to use web fonts on my website. Coming to the point, I've seen two variants in @font-family CSS code, which you can see below: @font-face { font-family: 'Droid Serif'; /* NOTE THIS LINE */ font-weight: normal; /* NOTE THIS LINE */ font-style: normal; /* NOTE THIS LINE */ src: url('DroidSerif-Regular-webfont.eot'); src: url('DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), local('Droid Serif'), local(

Force Chrome to use external font in CSS

阅读更多关于 Force Chrome to use external font in CSS

问题 It took me a long time to figure out, that Chrome always prefers local installed fonts over a font with the same name that is linked in the css (See also https://stackoverflow.com/a/27704394/1099519). My problem is how to figure out, to force Chrome not to do so. On my page https://www.amon.cc/ I use "Roboto Light" from Google Fonts (https://fonts.google.com/specimen/Roboto), like this: <link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css" /> In my CSS

ie9 doctype and fonts?

阅读更多关于 ie9 doctype and fonts?

问题 <!doctype html> <html> <head> <title>Test Ubuntu</title> <link href="http://fonts.googleapis.com/css?family=Ubuntu:regular" rel="stylesheet" type="text/css" /> <style> body { font-family: 'Ubuntu', sans-serif; } </style> </head> <body> Test Ubuntu </body> </html> shows the font in chrome and firefox... but in ie9, if i add the doctype line, it breaks!? works fine without it. i would like to get it working in all three browsers (with doctype? because sometimes other stuff like css relies on

Google webfonts and windows xp

阅读更多关于 Google webfonts and windows xp

问题 My site is utilizing google fonts, and I'm having some issues with XP. Namely, because XP doesn't have anti-aliasing by default, all the fonts are pixelated, even in browsers like Firefox and Chrome. Is there a way to correct this issue, or are XP users just stuck with it? 回答1: use SIRF! we all hate flash but this is the only feasible solution. And this issue is not restricted to windows XP, its the same case with all windows platforms. Another option is to keep a text shadow of 1px 1px 1px