Question

我正在使用我在Google Fonts找到的自定义字体作为我正在处理的网站中的标题标记。它可以使用Getting Started指南中描述的任何方法在Chrome for Windows中正常运行。但是，该字体无法在Chrome for Android中呈现，实际上它甚至不会回到我的第二选择，即'Impact'并被视为“网络安全”。所以我在本地下载了converted it到每个相关格式，并使用this guide on @font-face生成了以下没有解决问题的CSS：

@font-face {
    font-family: 'Oswald';
    src: local('assets/fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
         local('assets/fonts/Oswald-Regular.woff2') format('woff2'),
         local('assets/fonts/Oswald-Regular.woff') format('woff'),
         local('assets/fonts/Oswald-Regular.ttf') format('truetype'),
         local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
    src: url('https://fonts.googleapis.com/css?family=Oswald') format('truetype');
}

然后我找到了solution using media queries并生成了以下CSS，但也没有用：

@media only screen and (max-width: 320px) {
    @font-face {
        font-family: 'Oswald';
        src: local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
    }
}

@media only screen and (max-device-width: 720px) and (orientation:portrait) {
    @font-face {
        font-family: 'Oswald';
        src: local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
    }
}

@media only screen and (max-device-width: 1280px) and (orientation:landscape) {
    @font-face {
        font-family: 'Oswald';
        src: local('assets/fonts/Oswald-Regular.svg#Oswald') format('svg');
    }
}

在两个解决方案中，我使用以下简单的CSS来使用字体：

h1, h2, h3, h4, h5, h6 {
    font-family: "Oswald", "Impact", "Charcoal", sans-serif;
}

这在我身边变得非常刺激，它让我振作起来，因为在原型在移动设备上工作之前我不能把它呈现给客户。任何帮助都将受到极大的赞赏。谢谢！

Answer 1

使用 https://www.fontsquirrel.com/tools/webfont-generator 生成字体。它会给你所有现成的东西，你必须把它放在正确的地方。

但我也认为@font-face不适用于 Opera Mini 8

Chrome for Android拒绝呈现自定义字体

1 个答案: