HTML怎么引用外部字体_HTML link引入字体操作【操作】-html教程-PHP中文网

用引入google fonts需复制官网生成的正确href链接，确保rel="stylesheet"，并置于css前；字体名、字重、样式须与引用文件严格一致，路径和font-display等配置也需精准设置。

html怎么引用外部字体_html link引入字体操作【操作】

直接在里加一行 <link> 就能用，但得确保 href 地址正确、rel="stylesheet" 不写错，否则字体根本不会加载。

去 Google Fonts 选好字体后，点「+ Select this style」，再点右上角「@import」标签页，切换到「」标签页，复制那行 <link> —— 别手敲，容易漏掉 https:// 或拼错 family= 参数
粘贴到 HTML 的内，位置无所谓前后，但必须在用到该字体的 CSS 之前（比如 <style></style> 或外链 CSS 前）
字体名要和 CSS 中 font-family 里的字符串严格一致，包括空格和引号：Google Fonts 给的示例里是 "Roboto"，那你的 CSS 就得写 font-family: "Roboto", sans-serif;，不能写成 roboto 或 Roboto-Regular

本地字体文件路径写错是最常见原因，浏览器不报字体错误，只默默回退到默认字体，很难发现。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

url() 里的路径是相对于当前 CSS 文件的位置，不是 HTML 文件 —— 如果 CSS 是 /css/style.css，字体在 /fonts/inter.woff2，那 src: url("../fonts/inter.woff2") 才对
别用绝对路径如 /fonts/xxx.woff2 测试本地文件（file:// 协议下会被浏览器拦截），开发时起个本地服务（比如 npx serve）再测
WOFF2 格式兼容性好且体积小，优先用它；如果还要兼容老 IE，得额外加 WOFF 和 EOT，但顺序很重要：src 列表里把兼容性最差的放最后，让现代浏览器优先加载 WOFF2

它控制字体加载期间文本是否先显示备用字体（比如系统黑体），等字体加载完再替换——设成 swap 能避免「文字闪一下消失又出现」，但可能造成布局偏移（FOIT → FOUT）。

不是 CSS 写错了，而是你引用的字体文件本身没包含对应字重或斜体变体。Google Fonts 默认只引 Regular（400），其他都得手动加参数。

Google Fonts 链接里要显式加上 &display=swap 后面追加 &wght@300,400,500,700（WOFF2 支持的语法）或传统写法 &weight=300,400,500,700
自定义 @font-face 时，每个字重/样式都要单独声明一个规则，font-weight: 700 必须对应一个只含粗体字形的文件，不能指望浏览器从 Regular 文件里“加粗”渲染
检查浏览器开发者工具的「Network」面板，看对应字重的字体文件是否真的发起了请求；没请求，说明 CSS 没匹配上，或者链接里漏了参数

字体加载不是加一行 <link> 就完事的事，真正卡住人的往往是路径、参数、字重声明这三处细节，而且问题不报错，只静默失效。