一个困扰了很久的问题，服务器会导致的网页默认字体显示不同吗？
資深大佬 : JCZ2MkKb5S8ZX9pq 9
情况说明
- 同一个 HTML 文件。
- 本地用 python 模拟服务
python -m http.server 80 --directory D:OneDrivesite - 同时以腾讯云 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> 大佬有話說 (12)