Google Font API使用浏览器检测。如何获取字体的所有字体变化 [英] Google Font API uses browser detection. How to get all font variations for font-face

问题描述

我刚刚发现Google Font API使用浏览器检测这意味着当您打开 http://fonts.googleapis.com/css?family=Racing+Sans+One ，它将只显示您当前浏览器所需的内容

所以我不能只抓住它并使用我自己的字体，如果我希望它能在所有的浏览器中工作。许多人这样做，不知道它不会到处工作

什么样的方法来获得字体的所有变化？ woff2 / WOFF / TTF /等？ （用作font-face的后备）

我只是尝试在Chrome中打开api页面，在Developer中更改浏览器的useragent欺骗，并通过变化。我看到至少有4

足够woff2 / woff / ttf，还是我需要多少版本才能安全？我也需要EOT / SVG版本吗？

然后你可以像这样使用它们以获得最大的跨浏览器好处：

  @ font-face {
 font-family ：'MyWebFont'; 
 src：url（'webfont.eot'）; / * IE9兼容模式* / 
 src：url（'webfont.eot？#iefix'）格式（'embedded-opentype'），/ * IE6-IE8 * / 
 url（'webfont.woff ''）格式（'woff'），/ *现代浏览器* / 
 url（'webfont.ttf'）格式（'truetype'），/ * Safari，Android，iOS * / 
 url webfont.svg＃svgFontName'）format（'svg'）; / *传统iOS * / 
} 
  

请参阅此答案以获取更多信息：链接

I just discovered that Google Font API uses browser detection

This means that when you open http://fonts.googleapis.com/css?family=Racing+Sans+One it will show the content needed only for your current browser

So I can't just grab that and use in my own font-face, if I want it to work in all browsers. Many people do this, not knowing it then won't work everywhere

What would be the method to get all variations of the font? woff2/woff/ttf/etc.? (to use as fallbacks in font-face)

I just tried opening that api page in Chrome, changing browser useragent spoofing in Developer, and go through the variations. I see at least 4

Is woff2/woff/ttf enough, or how many versions do I need to be safe? Do I need EOT/SVG version too?

解决方案

Try downloading atleast these variations of the webfonts : eot , woff , ttf , svg and then you can use them like this for maximum cross browser benefits :

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff') format('woff'), /* Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

See this answer for more information: Link

这篇关于Google Font API使用浏览器检测。如何获取字体的所有字体变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！