为什么指定的字体系列不会在手机上加载？

Question

我整天都在处理这个问题，我似乎根本找不到解决此问题的方法。我尝试为网站上的文本设置的字体系列将不会完全加载到任何其他设备上，无论我做什么。它仅加载在PC上，而我在其上测试该网站的其他内容均未加载。这真让我很烦。

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

尝试一下：从Google字体网站上获取以下内容，将其添加到文档的开头：

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

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

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

此应该应该使用Roboto字体。

关于浅色字体，请确认字体位于站点目录的 / fonts / 文件夹中。似乎正在使用后备广告。

Answer 2

希望这对您有用。

Roboto的“不家人”没有正确导入。在这里，您尝试使用Google Font API在本地和远程导入。这是错误的。您应仅遵循上述一种方法。 在所有其他设备上而不是PC上出现问题的原因是Roboto字体已安装到PC上。由于其他设备无法在内部找到Roboto字体，因此它们正在尝试加载称为sans serif的后备字体。

删除导入的css规则，并尝试在header的{​​{1}}标签内链接Google字体，如下所示

index.html