Richard14
V2EX  ›  问与答

网页开发中如何快速查找看到的内容是什么字体?

  •  
  •   Richard14 · Jul 24, 2021 · 3302 views
    This topic created in 1779 days ago, the information mentioned may be changed or developed.

    比如现在一个典型场景是我想知道有关视频的标题用的什么字体,结果 F12 翻了半天也没确定

    11 replies    2021-07-25 08:19:58 +08:00
    xiangyuecn
        1
    xiangyuecn  
       Jul 24, 2021


    Elements 面板 Computed 选项卡,搜索 font,会看到字体相关的很多实际信息
    Richard14
        2
    Richard14  
    OP
       Jul 24, 2021
    @xiangyuecn 我按照你的方法搜索到了 V2EX 使用的是
    Richard14
        3
    Richard14  
    OP
       Jul 24, 2021
    @xiangyuecn 我按照你的方法搜索到 V2EX 使用的是

    font-family: "Helvetica Neue", "Luxi Sans", "Segoe UI", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Logo";

    font-size: 14px;

    有什么办法能找到快速的引入方式吗,比如我虽然知道它在使用微软雅黑,但我怎么将这个字体文件复制到自己的项目呢。很多英文字体是不认识的。
    sugarsalt
        4
    sugarsalt  
       Jul 24, 2021   ❤️ 2
    我在用 Fontanello 插件,选中要查看的字体,右键就能看到字体名称、字号、字重以及字体的颜色
    小缺点是有时需要刷新页面才能看。。
    [Imgur]( https://imgur.com/xVRZJuc)
    QingStone
        5
    QingStone  
       Jul 24, 2021 via iPhone
    视频的标题?你说的视频播放网页的标题内容,还是视频里的字幕标题?
    Richard14
        6
    Richard14  
    OP
       Jul 24, 2021
    @QingStone 网页内容,不是视频里的内容
    maplerecall
        7
    maplerecall  
       Jul 24, 2021 via Android   ❤️ 1
    上边说的审查字体的方法是对的,但一般见到的雅黑苹方 helvetica 之类的都只是为了适应不同系统或者自己安装了字体的用户,不会把这些放上服务器。只有的确需要使用非系统自带的字体时才会用 font face 定义并放到项目中,这些字体可能可以在 f12 的网络 tab 中找到,但也有可能会被 base64 后直接和 css 一起返回,这就不好提取了。
    Justfakemoz
        8
    Justfakemoz  
       Jul 24, 2021
    有个插件叫“WhatFont”
    Variazioni
        9
    Variazioni  
       Jul 24, 2021
    这题我会。。。
    实在找不到的话可以截图。。
    https://www.qiuziti.com/
    去这里识别。。
    Richard14
        10
    Richard14  
    OP
       Jul 25, 2021
    @maplerecall 我的需求就是想在网页里和他用一样的字体,我要怎么知道哪些字体是系统自带的,而哪些字体需要额外附带资源呢?
    ShaunSS
        11
    ShaunSS  
       Jul 25, 2021
    font finder 插件

    此贴标题为例:
    font-family (stack): "Helvetica Neue", "Luxi Sans", "Segoe UI", "Hiragino Sans GB", "Microsoft Yahei", sans-serif, "Apple Logo"
    Font being Rendered: Hiragino Sans GB 100.0% (local)

    B 站找了个视频标题:
    font-family (stack): apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif
    Font being Rendered:PingFang SC 91.2% (local) system-ui 8.8% (local)
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2830 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 04:28 · PVG 12:28 · LAX 21:28 · JFK 00:28
    ♥ Do have faith in what you're doing.