修改网站字体代码_CSS font-family与外部字体引入完整教程
网站默认字体不符合品牌要求，想换成更美观的字体，需要修改CSS里的font-family代码。很多新手不知道字体代码在哪里、怎么改、引入外部字体要注意什么。本文详细讲解网站字体代码的修改方法，包括全局字体、标题字体、引入Google Fonts和自定义字体文件。
一、找到字体代码位置。
方法1：浏览器开发者工具。 打开网页，按F12，Elements面板选中body或标题元素，右侧Styles面板找`font-family`，能看到当前字体和在哪个CSS文件第几行。点击CSS文件名跳转到对应代码。
方法2：直接搜索CSS文件。 用FTP或宝塔文件管理器，进入`template/模板名/css/`，打开主CSS文件（style.css、main.css、app.css），Ctrl+F搜索`font-family`，找到所有字体定义。常见位置： - 全局字体：`body { font-family: ...; }` 或 `* { font-family: ...; }` 或 `html { font-family: ...; }` - 标题字体：`h1,h2,h3,h4,h5,h6 { font-family: ...; }` - 导航字体：`.nav { font-family: ...; }` - 正文字体：`.content p { font-family: ...; }` - 按钮字体：`.btn { font-family: ...; }`
二、修改font-family值。
把font-family的值改成想要的字体列表，比如： ```css body { font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif; } ``` font-family是按顺序的字体列表，浏览器从左到右找用户电脑上安装的字体，找到第一个就用，找不到试下一个，最后一个`sans-serif`是通用字体族，所有系统都有。
中文字体推荐搭配： ```css /* Mac用苹方，Windows用微软雅黑，其他用默认无衬线 */ font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
/* 设计感强一点，Mac用冬青黑体，Windows用微软雅黑 */ font-family: "Hiragino Sans GB", "Microsoft YaHei", "PingFang SC", sans-serif;
/* 衬线字体（宋体类，适合文章、文化类网站） */ font-family: "Songti SC", "SimSun", "Noto Serif CJK SC", serif; ```
英文字体推荐： ```css /* 无衬线，现代简洁 */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* 衬线，优雅正式 */ font-family: Georgia, "Times New Roman", Times, serif;
/* 等宽，代码/技术类 */ font-family: "SF Mono", Monaco, Consolas, "Courier New", monospace; ```
注意事项： - 多字字体名要加引号，比如"Microsoft YaHei"，单字字体名可以不加，比如Arial。 - 区分大小写，"Microsoft YaHei"不要写成"microsoft yahei"。 - 不要用太生僻的中文字体，用户电脑没装会fallback到默认字体。 - 最后一定要加通用字体族（sans-serif/serif/monospace），确保所有设备都有字体显示。
三、修改字体大小、粗细、行高。
除了font-family，经常一起改的属性： ```css body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; /* 字号，正文14-16px */ font-weight: 400; /* 粗细，400正常，700粗体，300细体 */ line-height: 1.6; /* 行高，正文1.6-1.8，标题1.2-1.4 */ color: #333; /* 文字颜色，正文深灰#333，不要纯黑#000 */ letter-spacing: 0; /* 字间距，标题可加1-2px */ }
h1 { font-size: 36px; font-weight: 700; line-height: 1.3; letter-spacing: 1px; } ```
四、引入Google Fonts（英文免费字体）。
如果想用用户电脑没装的英文字体（比如Roboto、Open Sans、Lato、Montserrat），用Google Fonts引入。
步骤： 1. 去fonts.google.com，选想要的字体，选字重（400、700等）。 2. 复制``代码，粘贴到HTML的`
`里，在CSS文件引用之前： ```html ``` 3. 在CSS里用： ```css body { font-family: 'Open Sans', "Microsoft YaHei", sans-serif; } h1 { font-family: 'Roboto', sans-serif; font-weight: 700; } ``` 4. 国内访问Google Fonts可能慢，用国内镜像：把`fonts.googleapis.com`换成`fonts.loli.net`或`fonts.font.im`，或下载字体文件到本地引入。五、引入自定义字体文件（@font-face）。
如果想用特殊中文字体或品牌定制字体，用户电脑没装，需要用@font-face引入字体文件。
步骤： 1. 准备字体文件：.woff2（推荐，体积最小）、.woff、.ttf、.eot（兼容IE）。可以从字体网站下载，或用在线转换工具把ttf转成woff2。 2. 在模板目录下创建`fonts/`文件夹，把字体文件传上去。 3. 在CSS文件顶部（所有样式之前）加@font-face声明： ```css @font-face { font-family: "MyCustomFont"; /* 字体名，自己起 */ src: url("../fonts/myfont.woff2") format("woff2"), url("../fonts/myfont.woff") format("woff"), url("../fonts/myfont.ttf") format("truetype"); font-weight: normal; font-style: normal; font-display: swap; /* 字体加载期间先用默认字体，加载完替换，避免空白 */ } ``` 4. 在需要用这个字体的元素上设置： ```css h1 { font-family: "MyCustomFont", "Microsoft YaHei", sans-serif; } ``` 注意路径：@font-face里的url是相对于CSS文件的路径。CSS在`css/`目录，字体在`fonts/`目录，路径是`../fonts/myfont.woff2`（上一级的fonts目录）。
中文字体文件很大（完整字库5-15MB），直接引入会严重拖慢页面加载。解决方案： 1. 字体子集化：用font-spider（字蛛）或fontmin工具，只提取页面实际用到的文字，生成小体积字体文件（几十KB到几百KB）。 2. 用在线中文字体服务：有字库、字加、Typing，通过JS动态加载，只加载用到的文字。 3. 谨慎使用：中文字体只用于标题或logo，正文用系统默认字体（苹方/微软雅黑），不要整站用自定义中文字体。
六、字体图标（iconfont）。
网站上的小图标（电话、邮箱、箭头、社交图标）常用字体图标，不是普通字体。引入方法： 1. 去iconfont.cn，选图标加入项目，生成在线链接或下载字体文件。 2. 在线链接：复制``代码加到head里，然后用``显示图标。 3. 本地引入：下载字体文件到fonts目录，CSS里加@font-face，定义.iconfont类，然后用对应class名。 4. 修改图标大小和颜色：`.iconfont { font-size: 24px; color: #3498db; }`，字体图标本质是字体，用font-size控制大小，color控制颜色。
七、修改后测试。
1. 清缓存：Ctrl+F5刷新，清CDN缓存。 2. 多设备测试：Windows（微软雅黑）、Mac（苹方）、iPhone、Android都看一遍，确认字体显示正常，没有fallback到难看的默认字体。 3. 检查加载速度：引入外部字体后，用站长工具测页面加载速度，字体文件太大导致加载慢的话，子集化或换系统字体。 4. 检查FOUT（字体闪烁）：页面先显示默认字体，外部字体加载完后跳变，这是正常的，用`font-display: swap`优化，或预加载字体文件。 5. 检查中文显示：自定义英文字体不会影响中文，中文会fallback到后面的中文字体，确认中文显示正常。
常见问题：
问题1：改了font-family没效果。 - 优先级问题：其他CSS规则覆盖了，F12看Styles面板，你的font-family被划掉了。用更具体的选择器或检查是不是有`!important`覆盖。 - 改错选择器：确认改的是body还是具体元素，全局字体改body，标题改h1-h6。 - 缓存：Ctrl+F5，清CDN。 - 字体名拼写错误："Microsoft YaHei"不要漏空格或拼错。
问题2：引入的外部字体不显示。 - 字体文件路径错误：@font-face的url是相对于CSS文件的，检查路径。 - 字体格式不支持：确认提供了woff2格式，现代浏览器都支持。 - CORS跨域：字体文件和网站不同域名，Nginx加`add_header Access-Control-Allow-Origin *;`。 - 文件没上传成功：FTP确认字体文件在fonts目录，权限644。
问题3：中文字体加载慢，页面空白。 - 完整中文字体文件太大，不要直接引入。用字体子集化只提取用到的文字，或用在线中文字体服务。 - 加`font-display: swap`，先显示默认字体，字体加载完再替换，避免空白。 - 正文用系统默认字体，自定义字体只用于标题和logo。
修改网站字体代码是CSS基础操作，找到font-family位置修改值，引入外部字体用Google Fonts或@font-face。关键是中文字体慎用（文件大），正文用系统默认字体最稳妥，自定义字体用于标题和logo提升品牌感。
更新时间：2026-08-26 17:18:56