Question

我在页面上使用不同的字体。我在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 for footer，使用taha作为身体。

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

Answer 1

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

无论如何，使用woff的Chrome无法获得渲染平滑效果，而不是强迫Chrome使用SVG。

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

1）转到this website，上传您的TTF并获得完整的字体套件。 2）当您下载此套件时，这将适用于Chrome，但要获得平滑效果修复，您需要进行一些更改以强制Chrome使用SVG字体。然后，转到this webiste以了解如何修复效果。就这样。你应该没有任何问题。如果您有疑问请告诉我，我会帮助您！

当您转到字体面板套件生成器时，您需要使用专家选项并选择生成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');
}
}

请告诉我你是否正常工作=）

Answer 2

这可能对你有所帮助：

@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;
}

Chrome无法读取所有@ font-faces

2 个答案: