Question

CSS“ JohnDoe”字体将不会在其他设备上显示。我的浏览器中的屏幕截图： johndoe font

我为我的妻子（michelleradztattoo.com）建立了一个网站。在我的计算机上，一切看起来都很好。当我们在手机或笔记本电脑上查看站点时，文本显示为基本字体。

我的猜测是，因为该字体已安装在我的计算机上，因此可以在浏览器（chrome）上正确显示。我已经在头部移动了CSS，没有任何变化。我有它位于之前和现在之后。位于fancybox中的“ text.css”是否有用。我尝试将其从fancybox部分中删除。

<head>
<meta charset="utf-8">
<title>Art</title>

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
<style type="text/css">
a:link {
    color: #000000;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
<link href="Styles.css" rel="stylesheet" type="text/css">

</head>

Answer 1

这里的问题是您的计算机上存在该字体，但手机上不存在。如果我要在计算机上访问您的网站，则可能也看不到该字体，因为我没有下载它。

在这种情况下，应使用示例http://fonts.google.com中的Webfont。这样，每个人都可以看到指定的字体。

Answer 2

只需为其他人重新发布：

确保使用字体规则定义字体系列。 https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Answer 3

正如其他人所建议的，这与仅在计算机上安装该字体有关，而没有其他设备有任何理由要安装它。

您可以使用Google Fonts，但不必说它们在阳光下会具有所有字体。

我建议并建议您将字体文件上载到网站所在的主机，这样，无论浏览器或设备如何，您的网站都可以随时访问正确的字体。

您很可能需要各种字体文件类型，以适应所有设备/浏览器。您可能可以通过Google搜索找到并下载其中大多数类型。但是，如果不能这样做，那么此Online Font Converter非常适合将字体文件转换为所需的其他文件类型。

将字体上传到网站后，您可以继续使用@font-face css rule来定义字体。

请花一些时间阅读本CSS-Tricks Article。它充分说明了@font-face，不同的文件类型以及使用哪种文件。

我建议您选择“ 尽可能深的浏览器支持”并使用：

@font-face {
   font-family: 'MyWebFont';
     src: url('fonts/webfont.eot'); /* IE9 Compat Modes */
     src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('fonts/webfont.woff2') format('woff2'), /* Super Modern Browsers */
          url('fonts/webfont.woff') format('woff'), /* Pretty Modern Browsers */
          url('fonts/webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
          url('fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
   }

然后像平常一样使用它...

.example p {
    font-family: "MyWebFont";
}

Answer 4

我已经通过手机访问了http://michelleradztattoo.com/，它显示了您的字体。由于js链接位于标题上，因此可能会发生这种情况。因此，您可以将js链接放在</body>之前。让我知道，您会得到什么不同。

CSS字体无法在设备上正确显示

4 个答案: