我想使用Google字体目录中的字体集合。我选择了样式并在项目模板中包含了CSS link
标签。
另外,使用Google字体,您还可以下载整个字体集合,得到的是一个包含所有字体样式的zip文件。
我可以创建一个等效于Google提供给我的CSS,在HTML中包含自托管字体文件作为备选项,以防访问者无法访问Google Font API。
如何设置这个过程,并防止Google字体文件和自托管字体文件都被下载?如果用户能够访问Google字体,它的浏览器就不应该下载字体的自托管版本。
我想使用Google字体目录中的字体集合。我选择了样式并在项目模板中包含了CSS link
标签。
另外,使用Google字体,您还可以下载整个字体集合,得到的是一个包含所有字体样式的zip文件。
我可以创建一个等效于Google提供给我的CSS,在HTML中包含自托管字体文件作为备选项,以防访问者无法访问Google Font API。
如何设置这个过程,并防止Google字体文件和自托管字体文件都被下载?如果用户能够访问Google字体,它的浏览器就不应该下载字体的自托管版本。
我建议自己托管它们。这是fontspring的“防弹”font-face语法。
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
确保这四个都设置了将确保它在各种浏览器上工作。只要确保你的字体有这四个类型就可以了。Font Squirrel也提供了很棒的fontface套件。
@font-face
at-rules,分别使用不同的 font-family
名称(例如 "Droid Sans"
和 "Droid Sans Local"
),然后使用像 "Droid Sans", "Droid Sans Local", Helvetica, Arial, sans-serif
这样的字体堆栈。但是,这会导致两种字体都被下载,增加加载时间。@font-face
at-rules,但使用两组 src
属性。如果浏览器决定下载所有指定的字体文件,则这也可能会增加加载时间。
src
规则中使用url()
路径和local()
路径来跟随 - 浏览器应该在找到可加载的路径后停止查找。虽然我没有尝试过。 - Tieson T.