移动版Firefox和Chrome无法识别@font-face字体。

3

我在我的网站中使用了一个特定的字体。在PC上 (本地和服务器) ,Firefox和Chrome可以识别它,但在移动设备上却不能 (Firefox和Chrome)。我在我的CSS文件中使用了@font-face。

我已经将字体上传到了服务器上。由于它在计算机上运行正常,所以我不知道应该尝试什么。非常感谢任何帮助。

这是我的HTML代码:

 <div class="welcome">WELCOME</div><div class="home">HOME</div>

这是我的CSS代码:
@font-face {
    font-family: 'typographicaregular';
    src: url('../fonts/typographica.regular-webfont.woff') format('woff2'),
         url('../fonts/typographica.regular-webfont.woff2') format('woff');
    font-weight: normal;
    font-style: normal;}

.welcome {
    width: 47%;
    padding: 0;
    margin: 0 auto;
    font-family: 'typographicaregular', sans-serif;
    font-size: .7em;
    letter-spacing: 26px;
    text-align: center;
    color: #004391;
}
.home {
    width: 85%;
    padding: 0;
    margin: -40px auto 0;
    font-family: 'typographicaregular', sans-serif;
    letter-spacing: 12px;
    font-weight: bold;
    font-size: 1.6em;
    text-align: center;
    color: #004391;
}

我希望在我的安卓手机和iPad上显示实际的字体,而不是一个通用的无衬线字体。


https://dev59.com/X2rWa4cB1Zd3GeqP6QRb - Tigerrrrr
我的理解是要使用Google字体,但它没有我需要的Typographica字体。 - Newsong80
1个回答

0

这似乎是一个重复的问题: @font-face Not Working in Chrome for Android

问题可能与您的font-family声明有关(我无法确定,因为您没有发布该部分)。例如,如果您有以下内容:

font-family: fghjkjh, 'jump_startregular', sans-serif;

...Chrome for Android会假装fghjkjh已安装(但实际上使用默认的Android字体)并忽略其他所有内容。(不确定这是一个bug还是一个特性。)

在这种情况下,解决方案是将'jump_startregular'移至最前面 - 并可能向@font-face块添加local源,这可能会导致其他旧版本浏览器出现问题。

"以上引用自上述链接"

如果这样做仍然不行,建议您使用Google字体。


没问题!(回复晚了抱歉) - Tigerrrrr

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接