如何在CSS与HTML中正确链接TTF、WOFF字体文件？@font-face用法求助

嘿，我明白你卡在@font-face和link标签加载字体这里了！咱们一步步拆解问题，帮你把字体弄正常～

先理清两种方法的区别，避免冲突 #

你现在同时用了<link>引入外部字体样式表和自己写@font-face，这很可能是导致不生效的原因——两种方法选一种用就行，不用叠加。

方法1：只用<link>标签（最简单，适合第三方字体托管） #

那个rbbt.net的<link>链接其实已经帮你在后台定义好了@font-face规则，你只需要：

1. 确保<link>标签放在HTML的<head>标签里，位置不能错：

   <head>
     <!-- 字体引入放在这里 -->
     <link href="http://rbbt.net/css?family=aspire-demibold" rel="stylesheet">
   </head>
   

2. 在CSS里直接使用对应的字体名，不需要自己写@font-face：

   /* 比如给标题用这个字体 */
   .board-title {
     font-family: 'aspire-demibold';
     font-weight: normal; /* 注意匹配字体的实际字重，避免变形 */
   }
   

方法2：自己写@font-face（适合自己托管字体文件） #

如果你想自己控制字体加载，需要先拿到字体的实际文件（比如.woff2/.woff格式，这是现代浏览器支持最好的格式），然后正确配置@font-face：

@font-face {
  font-family: 'aspire-demibold'; /* 自定义字体名，后面要对应上 */
  src: url('路径/到/aspire-demibold.woff2') format('woff2'),
       url('路径/到/aspire-demibold.woff') format('woff');
  font-weight: 600; /* 根据字体实际字重填，比如demibold一般是600 */
  font-style: normal;
}

/* 然后使用 */
.message-board-text {
  font-family: 'aspire-demibold', sans-serif; /* 加个 fallback 字体更稳妥 */
}

常见坑点排查 #

• 检查浏览器控制台（按F12打开）：有没有404错误？如果有，说明字体链接/文件路径写错了。
• 字体名要完全匹配：如果rbbt.net的样式表里定义的字体名是Aspire Demibold（带空格），那你CSS里也要写font-family: 'Aspire Demibold';，不能写错字。
• 跨域问题：如果你的网站是HTTPS，而rbbt.net是HTTP，浏览器会阻止加载不安全的资源，这时候换HTTPS的链接试试（如果对方支持的话）。

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