css WordPress字体不适用于移动的

qqrboqgw 于 2023-04-23 发布在 WordPress

关注(0)|答案(3)|浏览(178)

我在我的website上添加了自定义字体，它在桌面上工作，如果我打开浏览器作为移动的字体工作，但当我在移动终端OT平板电脑上打开它时，字体不起作用。

@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");
}

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

css

来源：https://stackoverflow.com/questions/76063573/wordpress-font-does-not-works-on-mobile

3条答案

按热度按时间

bqujaahr1#

尝试使用@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";
}

赞(0）回复(0）举报 2023-04-23

toiithl62#

你需要用引号括起你的字体文件url，因为它们包含空格。
查看开发工具中的网络选项卡：字体未加载。
您可能会在桌面设备上看到本地安装的副本。
像这样修改你的@font-face

@font-face {
    font-family: LTblackL;
    src: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.woff')format("woff"),
        url('https://flash-games.online/wp-content/themes/vemlo/fonts/Helvetica Neue LT GEO 85 Heavy_1.ttf') format("truetype");
    font-weight: 700;
}

此外，您可以安全地删除.eot和.svg。
.eot仅受Internet Explorer支持，.svg不再受Firefox或Chromium支持。
我还建议指定font-weight，否则不同的字体可能无法正确Map到默认为粗体的元素（例如<strong>，<h1>等）。
您还应该更改URL的顺序，从最紧凑的现代格式（.woff2）开始。如果浏览器无法使用它，它会跳到下一个格式（例如woff）