css – Google Font API使用浏览器检测.如何获取font-face的所有字体变体

前端之家收集整理的这篇文章主要介绍了css – Google Font API使用浏览器检测.如何获取font-face的所有字体变体前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚刚发现Google Font API使用浏览器检测功能

这意味着当您打开http://fonts.googleapis.com/css?family=Racing+Sans+One时,它将显示仅适用于您当前浏览器的内容

所以我不能只是抓住它并使用我自己的font-face,如果我想让它在所有浏览器中工作.许多人这样做,不知道它会无处不在

获取字体的所有变体的方法是什么? woff2 / WOFF / TTF /等? (用作font-face中的后备)

我刚尝试在Chrome中打开api页面,在Developer中更改浏览器useragent欺骗,并完成各种变化.我看到至少4个

woff2 / woff / ttf是否足够,或者我需要多少个版本才能安全?我也需要EOT / SVG版本吗?

解决方法

尝试下载至少这些webfonts的变体:eot,woff,ttf,svg然后你可以像这样使用它们以获得最大的跨浏览器优势:
@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 */
}

有关更多信息,请参阅此答案:Link

猜你在找的CSS相关文章