为什么分配的字体系列无法在移动设备上加载？

Question

我整天都在处理这个问题，我似乎根本找不到为什么会发生这种情况的解决方案。无论我尝试做什么，我尝试为网站上的文本设置的字体系列都不会在任何其他设备上加载。它只在PC上加载，但我测试网站的其他内容都没有。这让我非常恼火。

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap");
@font-face {
font-family: "Roboto", sans-serif;
src: url("fonts/roboto-v20-latin-regular.eot");
src: url("fonts/roboto-v20-latin-regular.eot") format("embedded-opentype"),
url("fonts/roboto-v20-latin-regular.woff2") format("woff2"),
url("fonts/roboto-v20-latin-regular.woff") format("woff"),
url("fonts/roboto-regular.ttf") format("truetype"),
}
@font-face {
font-family: "Roboto Light", sans-serif;
src: url("fonts/Lightversion/Roboto-Light.eot");
src: url("fonts/Lightversion/Roboto-Light.eot") format("embedded-opentype"),
url("fonts/Lightversion/Roboto-Light.ttf") format("truetype"),
url("fonts/Lightversion/Roboto-Light.woff") format("woff");
}
body {
font-family: "Roboto", "Roboto Light", sans-serif;
margin: 0 auto;
background-image: url(../images/playstation-pattern.png);
background-repeat: repeat;
background-position: center;
}
.welcome {
height: 100%;
display: flex;
color: #404040;
font-family: "Roboto Light", sans-serif;
text-align: center;
line-height: normal;
}
.inner-welcome {
width: 300px;
margin: auto;
}
.welcome h2 {
margin-top: 0;
font-family: "Roboto Light", sans-serif;
font-weight: bold;
}
.welcome p {
margin-bottom: 0;
}
a:link {
text-decoration: none;
font-weight: bold;
color: #404040;
}
a:hover {
filter: brightness(1.75);
color: #404040;
}
a:visited {
text-decoration: none;
color: #404040;
}
i {
font-weight: normal;
}

Answer 1

试试这个： 取自谷歌字体网站，将以下内容添加到文档的头部：

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
</style>

，然后在样式表中添加以下内容：

font-family: 'Roboto', sans-serif;

这应该照顾机器人字体。

对于浅色字体，请确认字体位于站点目录的/fonts/文件夹中。看起来它正在使用回退。

Answer 2

希望这对你有用。

Roboto

不系列未正确导入。在这里，您尝试使用Google字体api进行本地和远程导入。这是错误的。您应该只遵循上述一种方法。 问题发生在所有其他设备中而不是PC中Roboto原因是字体已安装到PC上。由于其他设备在内部找不到Roboto字体，因此它们正在尝试加载名为sans serif的后备字体

。删除导入 css 规则，并尝试将 Google 字体链接到index.html的标记header如下所示

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap">