我在我的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");
}
这就是我的做法。知道哪里出了问题吗?
3条答案
按热度按时间bqujaahr1#
尝试使用
@import
函数。toiithl62#
你需要用引号括起你的字体文件url,因为它们包含空格。
查看开发工具中的网络选项卡:字体未加载。
您可能会在桌面设备上看到本地安装的副本。
像这样修改你的
@font-face
此外,您可以安全地删除
.eot
和.svg
。.eot仅受Internet Explorer支持,.svg不再受Firefox或Chromium支持。
我还建议指定
font-weight
,否则不同的字体可能无法正确Map到默认为粗体的元素(例如<strong>
,<h1>
等)。您还应该更改URL的顺序,从最紧凑的现代格式(.woff2)开始。如果浏览器无法使用它,它会跳到下一个格式(例如woff)
fcg9iug33#
并非所有浏览器都支持所有字体。可能是您正在测试的浏览器不支持此字体。
您可以检查https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet以获取有关测试字体是否正在加载的提示。