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

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;

这应该负责 Roboto 字体。

Light 字体方面，确认字体在站点目录的/fonts/ 文件夹中。看起来它正在使用回退。