WordPress 字体不适用于移动设备

Question

我在我的网站上添加了自定义字体，它在桌面上工作，如果我打开浏览器作为移动字体工作，但是当我在移动设备或平板电脑上打开它时，字体不起作用。

@font-face {
    font-family: LTblackL;
    src:url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.eot);
    src:url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.ttf),
    url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.woff)format("woff"), 
    url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.woff2)format("woff2"), 
    url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.svg#filename)format("svg"),
    url(https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.otf)format("opentype");
}

我就是这样做的。知道哪里出了问题吗？

Answer 1

尝试使用

@import

功能。

/* Import the font with the source url */

@import url("fonts.com/font/example");

/* Set the font for the website body */

body {
  font-family: "example";
}

Answer 2

有些移动设备不支持所有字体格式。确保您使用的字体格式受设备支持。您可以尝试使用网络字体生成器将您的字体转换为不同的格式

在移动设备上下载大字体文件可能需要更长的时间，这可能导致字体无法正确显示或根本无法显示。尝试优化字体的文件大小，看看是否有帮助

移动设备可能缓存了不包含自定义字体的旧版本网站。您可以尝试清除移动设备上的浏览器缓存，或者在字体 URL 中添加版本参数以强制浏览器下载更新的字体

一些移动浏览器可能不完全支持某些字体属性，例如 font-weight 或 font-style。您可以尝试使用后备字体或测试不同的字体属性以查看是否有所不同