我希望在响应式网站上使用购买的带有 WOFF 和 EOT 字体格式的 Web 字体。毋庸置疑,该格式需要适用于包括 Android 在内的所有设备。
我正在与开发人员合作,他们告诉我此类设备不支持 WOFF 和 EOT。
我的问题是,如果可以通过 typekit 托管,这有什么不同吗?
您说默认的 Android 浏览器不支持 WOFF 或 EOT 字体是正确的。Android 设备广泛支持的唯一字体格式是 TTF/OTF。一些较新(3.0+)的 Android 版本也将支持 SVG 字体。通常,Web 字体将与所有三种主要格式打包在一起:WOFF、EOT 和 TTF/OTF。这三种文件类型在您的 CSS 中与正确的 @font-face 一起使用时,将确保该字体在当今大量使用的几乎所有设备/浏览器上都能正常工作。
您的 webfont 应该具有所有三种主要文件格式。如果没有,您可以使用Font Squirrel Webfont Generator之类的工具来获取它。通过 typekit 托管也可以提供解决方案,但 typekit 在某些情况下并不是免费的,这与自己进行转换不同。
试试这个实现
@font-face {
font-family: 'OpenSans';
src: url('fonts/OpenSans-Regular-webfont.eot');
src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: 'OpenSans';
font-weight: 300%;
}
有关更多信息,请查看此示例https://github.com/ttibensky/BulletProof-font-face-implementation