如何修改模板上面内容的字体_网站字体样式CSS修改完整指南
网站模板默认字体可能不符合品牌要求，或者想换更好看的字体，需要修改CSS里的字体设置。本文讲解网站字体的修改方法，包括全局字体、标题字体、正文字体、引入外部字体、中文字体注意事项。
网站字体由CSS的`font-family`属性控制，找到模板CSS文件里的font-family设置，修改字体名称就行。
第一步：定位字体CSS。
方法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: ...; }` - 标题字体：`h1,h2,h3,h4,h5,h6 { font-family: ...; }` - 导航字体：`.nav { font-family: ...; }` - 正文字体：`.content p { font-family: ...; }`
第二步：修改字体名称。
把font-family的值改成想要的字体，比如： ```css body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; } ``` font-family是按顺序的字体列表，浏览器从左到右找用户电脑上安装的字体，找到第一个就用，找不到试下一个，最后一个`sans-serif`是通用字体族，所有系统都有。
中文字体推荐： - Windows："Microsoft YaHei"（微软雅黑，最常用，清晰）、"SimSun"（宋体）、"SimHei"（黑体） - Mac/iOS："PingFang SC"（苹方，Mac默认）、"Hiragino Sans GB"（冬青黑体） - Android："Noto Sans CJK SC"（思源黑体） - 通用：sans-serif（无衬线，系统默认）、serif（衬线，宋体类）
英文字体推荐： - 无衬线：Arial、Helvetica、"Helvetica Neue"、Roboto、Open Sans、Lato - 衬线：Times New Roman、Georgia、"Times New Roman" - 等宽：Consolas、Monaco、"Courier New"
中文字体设置建议： ```css font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; ``` Mac用苹方，Windows用微软雅黑，其他系统用默认无衬线，覆盖所有平台。
不要用太生僻的中文字体，用户电脑没安装会 fallback 到默认字体，显示效果不可控。如果一定要用特殊字体，需要用@font-face引入字体文件（见下文）。
第三步：修改字体大小、粗细、颜色。
除了font-family，还经常需要改： - 字体大小：`font-size: 16px;`（正文14-16px，标题20-48px） - 字体粗细：`font-weight: 400;`（400正常，700粗体，300细体） - 行高：`line-height: 1.6;`（正文1.6-1.8，标题1.2-1.4） - 字体颜色：`color: #333;`（正文深灰#333，标题黑色#111，不要用纯黑#000太刺眼） - 字间距：`letter-spacing: 1px;`（标题可以加1-2px字间距，正文不用） - 文字对齐：`text-align: center;`（left/center/right）
示例： ```css body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; line-height: 1.6; color: #333; }
h1 { font-size: 36px; font-weight: 700; line-height: 1.3; color: #1a1a1a; letter-spacing: 1px; } ```
第四步：引入外部字体（@font-face）。
如果想用用户电脑没安装的特殊字体（比如设计感强的英文字体、品牌定制字体），需要用@font-face引入字体文件。
步骤： 1. 准备字体文件：.woff2（推荐，体积小）、.woff、.ttf、.eot（兼容IE）。可以从fonts.google.com（英文免费）、iconfont.cn（中文部分免费）、字体天下等网站下载。 2. 把字体文件上传到`template/模板名/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; } ```
中文字体文件很大（几MB到十几MB），不建议用@font-face引入完整中文字体，页面加载会很慢。如果一定要用特殊中文字体，用字体子集化工具（比如font-spider、字蛛）只提取页面用到的文字，生成小体积字体文件。或者用在线中文字体服务（比如有字库、字加），通过JS动态加载。
Google Fonts引入方法（英文，免费）： 在HTML的`
`里加： ```html ``` 然后CSS里用：`font-family: 'Roboto', sans-serif;` 国内访问Google Fonts可能慢，用国内镜像（比如fonts.loli.net）或下载到本地引入。第五步：修改字体后清缓存测试。
改完CSS保存，刷新网页（Ctrl+F5强制刷新），看字体是否变化。用F12检查元素，确认font-family生效。在不同设备（Windows、Mac、手机）上测试，确保字体显示正常。
常见问题：
问题1：改了font-family没效果。 - 优先级问题：其他CSS规则的font-family优先级更高（比如更具体的选择器、!important）。用F12看Styles面板，当前font-family有没有被划掉，被划掉说明被覆盖了，找到覆盖的规则修改或提高优先级。 - 缓存问题：Ctrl+F5强制刷新，清CDN缓存。 - 改错文件：确认改的是当前模板的CSS文件，不是其他模板的。 - 字体名拼写错误："Microsoft YaHei"不要写成"微软雅黑"或"MicrosoftYaHei"，多字字体名要加引号。
问题2：中文字体在Mac上显示不好看。 - Mac默认中文字体是苹方（PingFang SC），如果font-family里微软雅黑在苹方前面，Mac没装微软雅黑会 fallback，显示效果可能不好。把"PingFang SC"放在"Microsoft YaHei"前面，Mac用苹方，Windows用微软雅黑。
问题3：引入的外部字体不显示。 - 字体文件路径错误：@font-face里的url是相对于CSS文件的路径，CSS在css/目录，字体在fonts/目录，路径应该是`../fonts/myfont.woff`（上一级的fonts目录）。 - 字体格式不支持：确认浏览器支持woff2（现代浏览器都支持），多提供几种格式兼容。 - CORS跨域：字体文件和网站不同域名，需要在服务器配置允许跨域（Nginx加`add_header Access-Control-Allow-Origin *;`）。 - 文件没上传成功：FTP确认字体文件上传到了正确目录。
问题4：字体加载慢，页面先显示默认字体再跳变（FOUT）。 - 用`font-display: swap;`，先显示默认字体，字体加载完自动替换，用户不会看到空白。 - 字体文件压缩：用woff2格式，比ttf小40%。 - 中文字体子集化：只提取用到的文字，减小文件体积。 - 用CDN加载字体文件，加快下载速度。
问题5：字体加粗不生效。 - 引入的字体只有normal字重，没有bold字重，浏览器会自动模拟加粗（faux bold），效果可能不好。引入字体时提供bold字重的文件，或在@font-face里设置font-weight: 700对应粗体文件。 - 或者用`font-weight: bold;`让浏览器模拟，一般够用。
字体是网站视觉风格的重要组成部分，改字体不需要改HTML，只改CSS就行。中文字体推荐用系统默认字体（苹方+微软雅黑），加载快、显示好、兼容性强；英文字体可以引入Google Fonts的优质字体。不要为了追求特殊字体牺牲加载速度，用户体验第一。
更新时间：2026-08-26 17:41:47
上一篇：PbootCMS后台表单提交校验失败解决实录：五种场景对应五种修复方法