Question

我在网站上使用特定字体。 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字体。

Answer 1

这似乎与@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源，这可能会导致其他较旧的浏览器出现问题。

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

如果这不起作用，建议您改用Google字体。

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

1 个答案: