时间戳

首页 > 解决方案 > 移动 Firefox 和 Chrome 无法识别 @font-face

html - 移动 Firefox 和 Chrome 无法识别 @font-face

问题描述

我在我的网站上使用了一种特定的字体。Firefox 和 Chrome 在 PC 上识别它（本地和服务器），但在移动设备上识别它（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;
}

它应该在我的 Android 手机和 iPad 上显示实际字体，而不是通用的 san-serif 字体。

标签： htmlcssmobilefontsfont-face

解决方案

这似乎与以下内容重复：@font-face Not Working in Chrome for Android

问题可能与您的font-family声明有关（我无法确定，因为您尚未发布该部分）。例如，如果你有这个：

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

...Android 版 Chrome 会简单地假装 fghjkjh 已安装（但实际上使用默认的 Android 字体）并忽略其他所有内容。（不确定这是错误还是功能。）

在这种情况下，解决方案是将“jump_startregular”移到前面 - 并可能将local源添加到@font-face块中，这可能会导致其他旧浏览器出现问题。

“从上面提到的链接中逐字逐句”

如果这不起作用，我建议您改用谷歌字体。

推荐阅读