V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
JCZ2MkKb5S8ZX9pq
V2EX  ›  前端开发

腾讯云 COS - 诡异的字体问题 [困扰已久]

  •  
  •   JCZ2MkKb5S8ZX9pq · 2018-10-06 17:28:32 +08:00 · 2747 次点击
    这是一个创建于 2241 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题

    • 同一个 html 文件,在本地查看字体正确。
    • 上传到阿里云查看也正确。
    • 上传到腾讯云 COS 查看不正确
    • 查看腾讯云的源文件,未被改动。

    范例

    • 手机 safari 访问,chrome 也有同样问题。
    • 左侧为访问本地页面,右侧为访问腾讯云页面。
    • serif 和 mono 字体不同。
    • 仔细看 sans-serif 在大磅数的差异,疑似也是不同字体。
    • serif / sans-serif / mono 在 500 左右字重明显不同。 sample

    求问:为什么腾讯云能改变字体显示?

    这个问题我百思不得其解啊,不论是手机 safari,还是电脑 chrome,都有这个问题。
    而且浏览器得到的源文件一摸一样,这是咋回事啊?


    测试源文件

    <!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 条附言  ·  2018-10-07 22:08:28 +08:00

    预览测试页地址

    http://t.cn/EhuVNEr

    12 条回复    2018-10-09 21:00:29 +08:00
    lhx2008
        1
    lhx2008  
       2018-10-06 17:55:33 +08:00 via Android
    本地和云不同?有试过存在别的地方吗
    lhx2008
        2
    lhx2008  
       2018-10-06 17:56:00 +08:00 via Android
    @lhx2008 看错了
    34C
        3
    34C  
       2018-10-06 17:58:52 +08:00
    传到阿里云使用的域名一样吗
    lemonda
        4
    lemonda  
       2018-10-06 18:05:32 +08:00
    F12 看下 console 有没有跨域问题
    MonoLogueChi
        5
    MonoLogueChi  
       2018-10-06 18:59:33 +08:00 via Android
    你发两个地址,我帮你看一下
    whileFalse
        6
    whileFalse  
       2018-10-06 22:12:43 +08:00
    你试试在别的机器上看你本地网站是否有问题。
    JCZ2MkKb5S8ZX9pq
        7
    JCZ2MkKb5S8ZX9pq  
    OP
       2018-10-07 22:09:02 +08:00
    @lemonda 不懂哎 看我 append 了测试页面
    JCZ2MkKb5S8ZX9pq
        8
    JCZ2MkKb5S8ZX9pq  
    OP
       2018-10-07 22:09:57 +08:00
    @MonoLogueChi 有劳了,网址在顶楼 append 里面。评论我发不了链接。
    JCZ2MkKb5S8ZX9pq
        9
    JCZ2MkKb5S8ZX9pq  
    OP
       2018-10-07 22:10:58 +08:00
    @whileFalse 就是用手机浏览器截的图呀。七牛和阿里云也一样,就腾讯云不一样……很谜
    JCZ2MkKb5S8ZX9pq
        10
    JCZ2MkKb5S8ZX9pq  
    OP
       2018-10-08 16:02:16 +08:00
    神奇地发现,PC 版 firefox 查看两个页面竟然是一致的。可能是强制指定字体了。
    y10210118
        11
    y10210118  
       2018-10-09 19:38:28 +08:00
    通过 windows+chrome 和 mac os + chrome 两种方式测试,都没有遇到你说的字体问题,会不会有其他因素影响了。如果还有问题最好提工单联系售后解决更高效吧。
    JCZ2MkKb5S8ZX9pq
        12
    JCZ2MkKb5S8ZX9pq  
    OP
       2018-10-09 21:00:29 +08:00
    @y10210118 你是访问了我那个测试页嘛?
    能再麻烦你试一下 chrome 隐身模式不带插件嘛,或者手机端。
    我刚在 mac 的 chrome 和 safari 都开隐身模式看了,我这边是能再现的。
    两台电脑,两台手机,连 win7 虚拟机都再现了。
    我这边只有 firefox 是无法再现的,可能是浏览器强制了字体。
    工单和论坛都提了,无解呀。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1288 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 17:30 · PVG 01:30 · LAX 09:30 · JFK 12:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.