如何查询字体CSS规则并在网站中使用本地无外链字体

一、查询目标字体对应CSS规则的方法 #

• 本地桌面字体：Windows端右键字体文件选择「属性」，在详细信息面板查看字体正式名称、字重、风格参数；Mac端打开「字体册」选中目标字体，直接读取PostScript名称、字重、斜体属性，这些参数就是后续CSS配置的核心依据。如果字体名称包含中文、空格，写CSS时必须用引号包裹。
• 浏览器已识别字体：打开浏览器开发者工具（按F12唤起），切换到「Computed（计算后样式）」面板，选中当前页面正在使用该字体的元素，下滑找到font-family属性，就能看到浏览器实际生效的字体标准名称。同时可以同步查看该字体生效时对应的font-weight、font-style属性值，直接复用即可。
• 字重风格对应规则：常规字体的字重和CSS值固定对应：细体对应font-weight: 300、常规体对应font-weight: 400、半粗体对应font-weight: 500、粗体对应font-weight: 700、特粗体对应font-weight: 900；斜体样式统一对应font-style: italic。

二、网站中引入使用这类字体的正确流程 #

注意：出于安全和隐私防护限制，现代浏览器不允许网页直接调用用户本地路径、浏览器本地存储的非公开字体，必须将字体文件部署到自己网站的静态资源目录，通过标准规则声明后才能使用

1. 准备字体资源
   将桌面的目标字体文件复制到网站项目的静态资源目录，推荐新建/assets/fonts/目录专门存放字体文件。优先使用woff2格式字体（体积小、兼容性覆盖95%以上的现代浏览器），如需兼容IE等老旧浏览器，可额外准备woff、ttf格式的同字体文件。
2. 编写@font-face声明
   在全局CSS文件的最顶部添加字体声明规则，同字体的不同字重、不同风格需要单独写声明，保持font-family名称一致即可，示例代码：

   /* 常规体声明 */
   @font-face {
     font-family: "CustomTargetFont"; /* 自定义字体调用名，可和字体原名保持一致 */
     src: url("../assets/fonts/TargetFont-Regular.woff2") format("woff2"),
          url("../assets/fonts/TargetFont-Regular.ttf") format("truetype"); /* 字体文件相对路径，路径错误会导致加载失败 */
     font-weight: 400; /* 对应当前字体文件的字重 */
     font-style: normal; /* 对应当前字体文件的风格，斜体填italic */
     font-display: swap; /* 字体加载策略，优先显示文本避免空白，自定义字体加载完成后自动替换 */
   }
   /* 粗体声明，和常规体同属一个字体族 */
   @font-face {
     font-family: "CustomTargetFont";
     src: url("../assets/fonts/TargetFont-Bold.woff2") format("woff2");
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
   

3. 全局/局部调用字体
   声明完成后，直接给需要应用字体的元素设置font-family属性即可，推荐全局配置时添加系统 fallback 字体，避免自定义字体加载失败时页面无可用字体：

   /* 全局生效配置 */
   body {
     font-family: "CustomTargetFont", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft Yahei", sans-serif;
   }
   

常见踩坑提示 #

• 不要直接写本地绝对路径（比如C:/Users/xxx/Desktop/font.ttf），这类路径仅在你自己的设备上有效，其他用户访问网站时会因路径不存在加载失败。
• 不要依赖用户本地安装了目标字体就跳过@font-face声明，现代浏览器的隐私防护机制会限制网页读取非系统默认的本地字体，大概率会出现字体不生效的问题。
• 使用字体前确认拥有对应字体的商用授权，避免侵权风险。
• 浏览器扩展、浏览器缓存中存储的无公开访问路径的字体，普通网页没有权限直接读取，需要先提取字体文件放到自己的项目静态资源中再使用。

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