情况说明
- 同一个 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>
1
Select Language