用<link>引入Google Fonts需复制官网生成的正确href链接，确保rel="stylesheet"，并置于CSS前；字体名、字重、样式须与引用文件严格一致，路径和font-display等配置也需精准设置。
怎么用 <link> 引入 Google Fonts 这类外部字体
直接在 <head> 里加一行 <link> 就能用，但得确保 href 地址正确、rel="stylesheet" 不写错，否则字体根本不会加载。
- 去 Google Fonts 选好字体后，点「+ Select this style」，再点右上角「@import」标签页，切换到「<link>」标签页，复制那行
<link>—— 别手敲，容易漏掉https://或拼错family=参数 - 粘贴到 HTML 的
<head>内，位置无所谓前后，但必须在用到该字体的 CSS 之前（比如<style>或外链 CSS 前） - 字体名要和 CSS 中
font-family里的字符串严格一致，包括空格和引号：Google Fonts 给的示例里是"Roboto"，那你的 CSS 就得写font-family: "Roboto", sans-serif;，不能写成roboto或Roboto-Regular
font-face 自托管字体时，src 的路径为什么总 404
本地字体文件路径写错是最常见原因，浏览器不报字体错误，只默默回退到默认字体，很难发现。
-
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
CSS 里 font-display 设成 swap 有什么实际影响
它控制字体加载期间文本是否先显示备用字体（比如系统黑体），等字体加载完再替换——设成 swap 能避免「文字闪一下消失又出现」，但可能造成布局偏移（FOIT → FOUT）。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 没设
font-display时，Chrome 等浏览器默认会等字体加载 3 秒，期间留空白（FOIT），用户体验更差 -
swap是最常用选项，适合正文类字体；如果字体是图标字体或装饰性强的标题字，可考虑optional（加载慢就放弃） - 这个属性只在
@font-face规则里生效，不能写在font-family或其他地方
引入外部字体后，font-weight 和 font-style 不生效
不是 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> 就完事的事，真正卡住人的往往是路径、参数、字重声明这三处细节，而且问题不报错，只静默失效。 
