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

如何知道网页元素的真实字体

  •  
  •   arbipher · 2014-09-13 10:28:09 +08:00 · 4022 次点击
    这是一个创建于 3725 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如用调试工具查看 新浪微博里的中文 的结果是
    font-family: Arial, Helvetica, sans-serif;

    用WhatFont插件查看的结果是
    Arial - regular

    我对CSS Font这部分不熟悉,明明是中文,为什么是英文字体。

    还有这个字体,居然会因为Preferences - Language & Region - Perferred Languages的设置而变化,
    修改Japanese和Chinese(Simplified)的顺序,网页的字体也变化了。

    这个中文字体是sans-serif退化来的吗?
    有办法能看到真实的中文字体吗?
    这剪不断理还乱的逻辑到底是什么样子的?

    头痛。
    9 条回复    2014-09-13 14:14:13 +08:00
    liaa
        1
    liaa  
       2014-09-13 11:10:04 +08:00   ❤️ 1
    liaa
        2
    liaa  
       2014-09-13 11:16:05 +08:00   ❤️ 7
    arbipher
        3
    arbipher  
    OP
       2014-09-13 11:32:35 +08:00
    @liaa 赞赞赞!给你一万个赞!
    还有,这个图是怎么制作的?
    oott123
        4
    oott123  
       2014-09-13 11:32:46 +08:00 via Android   ❤️ 1
    Get a FireFox。
    火狐的原生 F12 里有个挺好用的字体查看工具…
    juicy
        5
    juicy  
       2014-09-13 11:41:24 +08:00   ❤️ 1
    最近也在研究字体哈,看透这个http://www.w3.org/TR/css3-fonts/#font-matching-algorithm 就差不多大致理解CSS Font的渲染原理了。

    另外, Chrome的Developer Tools里面就有字体的渲染的详细情况。

    比如
    DejaVu Sans—165 glyphs
    TakaoPGothic—112 glyphs
    WenQuanYi Micro Hei—28 glyphs
    LazarusX
        6
    LazarusX  
       2014-09-13 12:04:41 +08:00   ❤️ 1
    如果 CSS 里只指定了英文的字体,那么对于中文来说,浏览器就依次按照浏览器的字体设置,操作系统的字体设置来查找 fallback 字体。
    WhyTry
        7
    WhyTry  
       2014-09-13 12:28:40 +08:00 via iPad   ❤️ 1
    你需要它 http://www.fontface.ninja/
    liaa
        8
    liaa  
       2014-09-13 13:20:24 +08:00   ❤️ 3
    我用这个制作 gif: http://www.cockos.com/licecap/
    zangbianxuegu
        9
    zangbianxuegu  
       2014-09-13 14:14:13 +08:00
    @WhyTry 下载一个字体是怎么做的?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   909 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:33 · PVG 06:33 · LAX 14:33 · JFK 17:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.