移動Firefox和Chrome無法識別@ font-face

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在Chrome for Android中無效

問題可能與你的font-family聲明有關（我無法分辨，因為你沒有發布那部分）。 例如，如果你有這個：

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

... Chrome for Android只會假裝fghjkjh已安裝（但確實使用默認的Android字體）並忽略其他所有內容。 （不確定這是一個錯誤還是一個功能。）

在這種情況下，解決方案是將'jump_startregular'移動到前面 - 並且可能將local源添加到@font-face塊，這可能會導致其他舊版瀏覽器出現問題。

“從上面提到的鏈接中逐字逐句采取”

如果這不起作用，我建議您使用谷歌字體。