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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 999 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

字体

F12

查找

标题

11 条回复 • 2021-07-25 08:19:58 +08:00

xiangyuecn

2021-07-24 08:44:15 +08:00

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

Richard14

2021-07-24 08:53:27 +08:00

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

Richard14

2021-07-24 08:54:33 +08:00

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

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

font-size: 14px;

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

sugarsalt

2021-07-24 09:01:07 +08:00

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

QingStone

2021-07-24 09:13:33 +08:00 via iPhone

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

Richard14

2021-07-24 09:20:14 +08:00

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

maplerecall

2021-07-24 09:47:00 +08:00 via Android

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

Justfakemoz

2021-07-24 18:24:56 +08:00

有个插件叫“WhatFont”

Variazioni

2021-07-24 20:27:14 +08:00

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

Richard14

2021-07-25 02:50:39 +08:00

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

ShaunSS

2021-07-25 08:19:58 +08:00

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)