0

我为我的页面使用不同的字体。我在 CSS 文件中使用的代码如下：

@font-face{
font-family:dst;
src:url('fonts/dastnevis.ttf'),
    url('fonts/dastnevis.eot'),
    url('fonts/dastnevis.otf');
}

@font-face{
font-family:hayat;
src:url('fonts/hayat.ttf'),
    url('fonts/hayat.eot'),
    url('fonts/hayat.otf');
}

@font-face{
font-family:taha;
src:url('fonts/taha.ttf'),
    url('fonts/taha.eot'),
    url('fonts/taha.otf');
}

问题是 Chrome（我使用的是 28 版）只读取这 3 种字体中的一种，即 dst，而不显示其他字体。我使用 dst 作为按钮，使用 hayat 作为页脚，使用 taha 作为正文。

编辑：Firefox 正在阅读并显示所有没有问题的人。并不是 Chrome 根本无法读取任何字体，而是它读取一种字体并忽略其他字体，尽管它们都具有相同的语法。

4

2 回答 2

0

Chrome 总是使用 woff。正如我在您的帖子中看到的，您没有加载 woff。

无论如何，带有 woff 的 Chrome 没有渲染平滑效果，而不是您需要强制 Chrome 使用 SVG。

要解决您的问题，请执行以下操作：

1) 访问该网站，上传您的 TTF 并获得完整的字体套件。2) 当你下载这个工具包时，它可以在 Chrome 上运行，但是为了获得平滑效果的修复，你需要做一些改变来强制 Chrome 使用 SVG 字体。然后，去这个网站学习如何修复这个效果。就这样。你应该毫无问题地让它工作。如果您有任何疑问，请告诉我，我会帮助您！

当您进入字体套件生成器时，您需要使用专家选项并选择生成 SVG 字体。

下载包后，强制chrome使用渲染效果，在font-face css后面加上这个css。像这样的东西：

@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
    font-family: 'chunk-webfont';
    src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}
}

如果你得到这个工作，请告诉我=）

于 2013-07-22T22:54:15.827 回答
0

这可以帮助你：

@font-face {
    font-family: 'dst';
    src: url('fonts/dastnevis.eot');/* IE9 Compat Modes */
    src: url('fonts/dastnevis.eot?#iefix'); /* IE6-IE8 */
    url('fonts/dastnevis.woff') format('woff'), /* Modern Browsers */
    src: local('☺'),  url('fonts/dastnevis.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/dastnevis.svg') format('svg');
    font-weight: normal !important;
    font-style: normal !important;
}
于 2013-07-23T07:55:38.237 回答