我正在尝试切换到 @font-face
而不是依赖用户安装字体(准确地说是 Terminus 字体,而不是它的 TTF 版本) .
不幸的是,在处理远程托管文件时,我遇到了一些奇怪的字体“粗体”或“失真”,如下图所示:
如您所见,出于某种原因,远程获取的字体在 12、14、16、18、20、24 号尺寸上失真,本地字体对这些部分应用了某种“规范化”,使它们看起来很漂亮就地。
另一件事是我尝试使用 FontSquirrel's WebFont Generator屏幕截图分别显示在这些 CSS 代码中的 demo-htmls:
@font-face {
font-family: 'terminus_ttfmedium';
src: url('terminusmedium-4.38-webfont.ttf') format('truetype');
}
和
@font-face {
font-family: 'terminus_ttfmedium';
src: local('Terminus (TTF)');
}
Terminus (TTF) 是同一包文件,只是安装到 /usr/share/fonts/
。
任何见解将不胜感激!
编辑:更改 FontSquirrel 高级选项似乎根本无助于解决此问题。
EDIT2:我尝试过的所有方法都不适用于 Firefox。此外,我已经将一种字体复制到工作目录(与本地使用的相同),通过“url”字段链接它,它仍然保持失真。这是徒劳的!
最佳答案
font-squirrel 曾经有一个包含多个输出的部分。 TTF 不适用于所有版本的浏览器
src: url('Bevan-webfont.eot?#iefix') format('embedded-opentype'),
url('Bevan-webfont.woff') format('woff'),
url('Bevan-webfont.ttf') format('truetype'),
url('Bevan-webfont.svg#BevanRegular') format('svg');
他们曾经拥有包含所有这些扩展的字体包,现在似乎无法在网站上找到它了。
关于css - @font-face 远程字体的模糊/粗体/扭曲字形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15257774/