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

[Richard14]

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

[xiangyuecn]

Elements 面板 Computed 选项卡，搜索 font，会看到字体相关的很多实际信息

[Richard14]

@xiangyuecn 我按照你的方法搜索到了 V2EX 使用的是

[Richard14]

@xiangyuecn 我按照你的方法搜索到 V2EX 使用的是

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

font-size: 14px;

有什么办法能找到快速的引入方式吗，比如我虽然知道它在使用微软雅黑，但我怎么将这个字体文件复制到自己的项目呢。很多英文字体是不认识的。

[sugarsalt]

我在用 Fontanello 插件，选中要查看的字体，右键就能看到字体名称、字号、字重以及字体的颜色
小缺点是有时需要刷新页面才能看。。
[Imgur]( https://imgur.com/xVRZJuc)

[QingStone]

视频的标题？你说的视频播放网页的标题内容，还是视频里的字幕标题？

[Richard14]

@QingStone 网页内容，不是视频里的内容

[maplerecall]

上边说的审查字体的方法是对的，但一般见到的雅黑苹方 helvetica 之类的都只是为了适应不同系统或者自己安装了字体的用户，不会把这些放上服务器。只有的确需要使用非系统自带的字体时才会用 font face 定义并放到项目中，这些字体可能可以在 f12 的网络 tab 中找到，但也有可能会被 base64 后直接和 css 一起返回，这就不好提取了。

[Justfakemoz]

有个插件叫“WhatFont”

[Variazioni]

这题我会。。。
实在找不到的话可以截图。。
https://www.qiuziti.com/
去这里识别。。

[Richard14]

@maplerecall 我的需求就是想在网页里和他用一样的字体，我要怎么知道哪些字体是系统自带的，而哪些字体需要额外附带资源呢？

[ShaunSS]

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)