网页PC端和手机端字体兼容问题

这是我的 html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            pre,
            code {
                font-family: "JetBrains Mono";
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <h1>Test GitHub Pages</h1>
        <pre><code>hello test</code></pre>
        <h1>测试一段中文字体</h1>
    </body>
</html>

因为不知道 ios 怎么访问本地的 html, 所以就放在 github 上了

可以看到, "hello test" 文本字体在手机端上的字体明显和 PC 端的不一样

因为手机端不支持 font-family: "JetBrains Mono";

能想到的一个原因是, 我这句代码, 引用的是Windows系统已经安装好的字体, 但是ios系统没有这个字体

那么问题来了, 我想把这个字体的源文件放到本地的 static 下, 在html中引用这个字体, 在push到github上,

这样在手机端应该就可以获取到我这个字体了, 但是应该如何实现?

我所知道的 html 外部只能引入 css 和 js, 如何引入字体文件呢?

如果这个方法行不通, 那么有么有其他的解决方案?

阅读 3.9k
3 个回答

不止手机没有这个字体,大部分人的电脑也没有这个字体,所以其实在别人的电脑上,他们看到的效果也跟你不一样。

建议:

  1. 虽然系统字体不一样,但大体上,每个系统的用户都习惯了自己系统的字体,所以阅读体验都不差
  2. 所以建议不同系统使用系统字体就好,比如 windows 就是微软雅黑,macOS 就是苹方
  3. 对于特殊布局、特殊效果需要的字体,可以使用 webfont 或者图片的形式来呈现
新手上路,请多包涵

css 中 @font-face 可以引入字体

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题