android - Android 版 Chrome 拒绝呈现自定义字体

Question

我使用的是在 Google Fonts 上找到的自定义字体对于我正在处理的网站中的标题标签。使用 Getting Started 中描述的任何方法，它在 Chrome for Windows 中运行良好指导。但是，该字体不会在 Android 版 Chrome 中呈现，事实上它甚至不会退回到我的第二选择，即 '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;
}

这正成为我心头的痛，它阻碍了我，因为在原型(prototype)在移动设备上运行之前我无法将它展示给客户。任何帮助将不胜感激。谢谢!

Answer 1

使用 https://www.fontsquirrel.com/tools/webfont-generator 生成您的字体。它会为您提供现成的一切，您只需将其放在正确的位置即可。

但我也觉得@font-face不适用于 Opera Mini 8