本地安装的TTF会覆盖Google字体

Mar*_*tin 10 css fonts google-font-api

我正在使用Google Fonts中的Ubuntu字体:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,300italic,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css' />
Run Code Online (Sandbox Code Playgroud)

我的样式表:

body {
    font-family: 'ubuntu',arial;
}
Run Code Online (Sandbox Code Playgroud)

它可以工作,但如果安装一个具有相同名称的字体(Ubuntu),它将覆盖来自Google字体的字体.

是否可以强制浏览器使用Google字体中的那个?

Jon*_*ius 12

答案不在于您的代码,而在于Google.

这是您要求的CSS的一部分:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: bold;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
Run Code Online (Sandbox Code Playgroud)

这里的关键是local('Ubuntu Bold'),如果可能请求加载本地文件.最简单的解决方案是复制所有Google的CSS,将其粘贴到您自己的CSS中,然后将此local名称修改为local('Ubuntu Bold NonExisting Name or Something Else').此类字体不存在,不会替换CSS加载的字体.

PS我自己没有测试过.如果0ihfXUL2emPh0ROJezvraLO3LdcAZYWl9Si6vvxL-qU.woffURL即将到期,那么你就处于困境.尝试查看字体的许可证并考虑自己托管字体,如果防止本地覆盖是优先级.

  • 为什么要将它改为`local('Something Nonexistant')`?为什么不删除当地人所以它只是`url('what')`? (4认同)
  • 对于某些字体,尤其是Oswald,在Web字体上优先考虑本地字体是令人烦恼的问题.我希望谷歌字体有一个URL变量,允许我们完全禁用本地字体,但由于这还不可能,复制他们的CSS和删除本地规则是唯一的解决方案.但是,重要的是要注意Google为特定浏览器提供自定义CSS,因此如果复制他们的CSS,您需要确保在每个浏览器的不同版本中访问他们的CSS网址,并合并结果! (4认同)
  • 这种技术(指定不存在的字体名称)是"笑脸"方法的基础.后来,UTF-8字符使用导致Android出现一些错误,因此不再推荐使用该方法.但我认为,这个黑客是有原因的.可能有些浏览器试图检测并加载本地字体.但是,最好不要使用`local()`并查看它是否适用于所有浏览器.有可能. (3认同)
  • 对不起,我不认为这是一个很好的解决方案.字体API为不同的客户返回不同的字体 - 请参阅[什么是Google字体API服务?](https://developers.google.com/fonts/docs/technical_considerations#Serving).如果您只是复制代码来自浏览器生成的请求,则结果会针对您的浏览器进行"优化",但仅适用于您的浏览器. (2认同)