如何查看网页未在HTML定义的字体及判断属性（含iPhone方案）

用iPhone+Mac的Safari开发者工具定位（官方方法） #

1. 开启iPhone的Safari开发模式：
   • 打开iPhone「设置」→「Safari浏览器」→「高级」，打开「Web检查器」。
   • 用USB将iPhone连接到Mac，Mac上打开Safari，顶部菜单栏选择「开发」，找到你的iPhone设备，点击对应网页。
2. 定位目标文本的字体：
   • 在Mac的Safari开发者工具「Elements」面板，点击左上角的选择工具（箭头图标），然后点击网页上的“MAPLE SYRUP”文本，选中对应的DOM元素。
   • 查看右侧「样式」面板，找到font-family属性，这里会显示字体名称（该网站的“MAPLE SYRUP”用的是Montserrat Alternates）。如果是自定义加载的字体，还能在「Sources」面板找到@font-face定义，查看字体文件的来源。

无Mac的替代方法（第三方工具） #

• 在iPhone上安装Fonts Ninja类浏览器扩展（需在App Store下载对应App并开启Safari扩展），打开网页后点击扩展图标，选中目标文本即可查看字体名称。

1. 通过字体名称查询许可：
   • 拿到字体名称后，直接搜索「[字体名] 商用许可」，查看字体官方网站的说明：
     • 开源字体（如Google Fonts、Adobe Fonts免费款）通常标注SIL OFL、Apache等开源许可，允许免费商用（包括商业项目）。
     • 专有字体一般会明确要求购买商用授权，未授权商用属于侵权。
2. 检查网页加载来源：
   • 如果字体是从第三方字体服务加载，服务页面会直接标注许可信息；如果是网站自定义上传的字体，可通过字体查看工具（如Mac的Font Book）打开字体文件，查看元数据里的许可说明。

针对该网站的补充说明 #

该网页的“MAPLE SYRUP”使用的是Montserrat Alternates字体，属于开源字体，遵循SIL Open Font License 1.1，可免费用于商业用途。

内容的提问来源于stack exchange，提问作者SwimBikeRun