情况说明

同一个 HTML 文件。

本地用 python 模拟服务

python -m http.server 80 --directory D:\OneDrive\site\

同时以腾讯云 cos 来放置静态页面。

问题

同一个文件，在两处调用的显示不同。
左边是本地，右边是腾讯云 cos 。
截图来自 iOS/safari 。

可见问题

腾讯云 COS 有更精细的字重控制。
腾讯云的 serif 衬线体 /cursive 手写体 /fantasy，都使用了无衬线体。
snas-serif 无衬线和 monospace 等宽，两边都使用了不同的字体。

猜想原因

关于第一点，cos 的字重更精细，我猜测可能就是因为使用的字体不同。腾讯云使用的字体，本身包含了较多的字重。

问题

那么离开字重问题，核心问题就是，为什么不同服务端返回的默认字体会不同？
这个默认字体是什么决定的？不是浏览器决定的吗？
PS：页面上调用的字体都是默认的 ["serif", "sans-serif", "cursive", "fantasy", "monospace"]，不包含具体 font-family 名称。

附 html 代码

几年前写的，还是 jquery 。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-control" content="no-cache" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1, maximum-scale=1" />
    <title>qcloud font test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
</head>

<body>
    <div id="host"></div>
    <hr>
</body>
<script type="text/javascript">
ff = ["serif", "sans-serif", "cursive", "fantasy", "monospace"]
text = '字体测试 Font Test'
for (var i in ff) {
    for (var fw = 100; fw <= 900; fw += 100) {
        console.log(ff[i], fw)
        $('body').append('<div style="font:' + fw + ' 12pt/1.5 ' + ff[i] + '">' +
            text + ' [' + fw + ' ' + ff[i] + ']' + '</div>')
    }
    $('body').append('<hr>')
}
$('#host').html(window.location.host)
</script>

</html>

JCZ2MkKb5S8ZX9pq

2020-06-13 00:06:33 +08:00

@also24

诡异的部分就在这里，request header 除了 Host 完全一致。

response 的话。

# 本地
Content-Length: 744
Content-type: text/html
Date: Fri, 12 Jun 2020 16:00:19 GMT
Last-Modified: Sat, 06 Oct 2018 08:55:42 GMT
Server: SimpleHTTP/0.6 Python/3.8.1

# 腾讯云 cos
Accept-Ranges: bytes
Content-Language: zh-CN
Content-Length: 744
Content-Type: text/html
ETag: c????????????????????????????????a
Last-Modified: Sat, 23 Feb 2019 01:09:13 GMT
Server: TencentCOS
x-cos-object-type: normal
x-cos-storage-class: STANDARD

感觉唯一有可能的，也许是 Content-Language 这个部分。
有可能是不同文字对应的默认字体不同。
我加个 meta 试试看哦。

JCZ2MkKb5S8ZX9pq

2020-06-13 00:19:18 +08:00

@also24 定位到了，果然是语言识别的问题。

html 头部加一个 meta
<meta http-equiv="content-language” content=”en-us”>

强制浏览器按指定语言来识别就可以了。腾讯云又自作聪明地加了一个语言信息。
不过的确有点意外，语言会导致默认字体指向不同的字型。
但回想起来，iOS 下系统语言改变，港台使用的繁体字型的确是有细微区别的。

JCZ2MkKb5S8ZX9pq

2020-06-13 00:52:20 +08:00

@also24 的确是比较冷门的问题，我刚好是处理英日文比较多。
而且这里一开始没反应过来的还有一个细节，就是英文语言下（左侧），回退到的中文，其实并不是右侧的中文字体。
所以有可能左边回退出来的中文字体，zh-CN 的排序还挺低的，先退到了别的语言字体。
而且从浏览器的检查工具里，好像是没办法定位到部分字符回退后显示的具体字体的，也有点麻烦。

JCZ2MkKb5S8ZX9pq

2020-06-13 01:15:44 +08:00

@also24 嗯，如果是英汉那还比较容易猜。
但特殊情况下，比如我面对日汉字，就挺麻烦。

说到日汉字，以前写过一个小东西涉及古文，希望在 iOS 显示宋体，调用系统默认的日文明朝，然后单独再写了个 python 去查 glyphs 会不会缺。另外日汉字还涉及到不同简化字型的替代字问题，基本要换成长得差不多，中国人也能认出来的异体字。

一个困扰了很久的问题，服务器会导致的网页默认字体显示不同吗？

情况说明

问题

可见问题

猜想原因

问题

附 html 代码