html字体宋体
作者：宁开亮建站博客 · 时间：20260829 · 合作 · 投诉
Q: HTML里怎么设置字体是宋体啊？我试了好多次都不生效，是不是代码写错了？
A: 哎呀，这个问题其实挺常见的，你别急哈。在HTML里设置宋体，最正统的做法就是用CSS的font-family属性，写法就是font-family: "SimSun", "宋体", serif;。这里SimSun是宋体的英文名，宋体是中文名，浏览器一般识别SimSun更稳当。还有一点，2026年的官方HTML标准（也就是HTML Living Standard）其实不强制指定字体，但浏览器默认字体栈里宋体还是有的。我建议你在全局样式里写body { font-family: SimSun, "宋体", serif; }，这样整个页面都会是宋体。不过啊，如果你在Mac或手机上，可能没有SimSun这个字体，那就得用系统自带的宋体替代，比如STSong，所以最好写个字体栈：font-family: SimSun, STSong, "宋体", serif;，这样兼容性就强多了。你试试看，要是还不生效，多半是缓存问题，按F5刷新一下就好了，真的。
Q: 我用font-family写了宋体，但网页显示的还是默认字体，这是咋回事？
A: 哎哟，这个坑我踩过无数次了。你写了font-family但没生效，最大的可能就是CSS选择器优先级不够，或者你写的位置被其他样式覆盖了。比如你写在了某个div上，但body或者父级字体样式权重更高，那就白搭。我给你支个招：先检查一下是不是在style标签或者外部CSS文件里写的，如果在行内style写，优先级最高，基本能生效。另外，2026年的官方浏览器调试工具（比如Chrome DevTools）里，你右键检查元素，看Computed样式里font-family到底是什么，一眼就看出问题。还有个小细节，宋体这个字体在英文环境下名字是SimSun，但如果你写成了"宋体"没加引号，或者引号是中文的，也会被忽略。记住：font-family: SimSun, '宋体', serif;，引号用英文单引号，然后确保没有拼写错误。要是还不行，你就硬核一点，直接加!important：font-family: SimSun !important;，这招暴力但有效，懂了吧？
Q: 我想把网页所有文字都改成宋体，但有些是标题有些是正文，能不能统一设置？
A: 可以的，这个活儿特别适合用通配符或者body统一下来。最简单的方法就是在CSS里写* { font-family: SimSun, "宋体", serif; }，这样所有元素包括标题、段落、按钮文字全都变成宋体，省事吧？不过我得提醒你，2026年的官方响应式设计指南里说，全局覆盖字体虽然简单，但可能会影响可读性，尤其是标题用宋体，在很多屏幕上会显得有点细。所以我建议你分开写：body { font-family: SimSun, serif; }，然后h1到h6再单独设个font-family: SimSun, serif;，这样其实也一样。但如果你想更讲究，正文用宋体，标题用黑体，那是另一回事。另外，中文网页里宋体是衬线字体，适合正文阅读，但如果你页面有数字或英文，宋体可能有点怪，但这不是大问题。你按我说的写，基本上整个页面都是宋体了，简直不要太统一。
Q: HTML里用font标签可以直接设置宋体吗？还有老式写法靠谱吗？
A: 哈，你这是问到老古董了。font标签那是HTML4时代的遗物，现在大家都用CSS了，不过呢，它确实还能用，写法是<font face="宋体">文字</font>，但face属性得写字体名，写SimSun也行。不过2026年官方规范明确不建议用font标签，因为它是纯表现层的，不符合语义化要求，而且很容易被CSS覆盖。你要是非要试，我劝你做好心理准备——很多浏览器都会忽略face属性，尤其是新版Chrome，直接给你用默认字体。所以我建议你老老实实写CSS，既规范又省心。真正的开发老手，绝对不碰font标签，懂的人都懂，别踩这个坑。
Q: 宋体的CSS写法里，SimSun和宋体哪个优先级高？如果两个都写了会怎么样？
A: 这个问题问到点子上了。一般来说，font-family是一个字体栈，浏览器会从左到右依次找，第一个找到了就停止。所以你写font-family: SimSun, "宋体", serif;，优先用SimSun，如果系统没有SimSun，才会尝试宋体，再没有就用serif通用衬线字体。但实际在Windows系统上，SimSun和宋体其实是同一个字体，所以没差别。但如果你在Mac或者Linux上，SimSun可能不存在，那就会用宋体（但Mac上宋体中文名不一定被识别，所以最好再加STSong）。2026年的官方文档里也说了，字体栈要靠前写你最想要的变体，后面都是备胎。所以你看，我写代码永远把SimSun放最前，宋体放第二，这样最稳。别搞反了，不然浏览器会先去找宋体，万一系统里没有就出乱子了。
Q: 能不能用CSS设置宋体加粗或者斜体？宋体有没有对应的变体？
A: 嗯，这个问题挺有意思。宋体本身是标准的书宋体，一般没有单独的斜体变体，但你可以用CSS的font-style: italic;来强制倾斜，浏览器会模拟倾斜效果，其实就是把字拉斜，不是真正的意大利体。加粗呢，用font-weight: bold;，同样是用算法加粗，因为宋体没有自带的粗体文件，但效果尚可。2026年的CSS Fonts Module Level 4里有个新特性叫font-synthesis，你可以设置为font-synthesis: weight style;，这能让浏览器在缺失粗体/斜体时自动合成，默认就是这样。不过呢，你要是追求特别好看的粗宋体，那得用专门的字体，比如方正粗宋或思源宋体Heavy，得引入外部字体文件。普通宋体加粗后边缘会有点糊，行内排版没啥问题，大标题就差点意思了。总之，小场景用bold模拟，大场景建议加载个粗宋字体，专业的就是不一样。
Q: 为什么我的宋体在手机上显示成了其他字体？是不是手机不支持？
A: 哎，这个问题太常见了，你别慌。手机（尤其是iPhone和安卓原生）默认不内置SimSun这个中文字体，iOS用的是苹方，安卓用的是思源黑体或者原生系统字体。所以当你写font-family: SimSun，手机浏览器找不到就自动回退到系统黑体了，这就是为什么你看到的是非宋体。2026年的官方设备规范里也明确说，字体支持因操作系统而异。那咋办？你可以引入网页字体，比如Google Fonts里的Noto Serif SC（思源宋体），用@font-face或者CDN加载，然后font-family: "Noto Serif SC", SimSun, serif;，这样手机上就能显示宋体风格的字体了。不过加载外部字体会影响性能，建议只对正文用，或者用字体子集化。你要是懒，就接受手机显示黑体吧，其实黑体在手机上更清晰，阅读体验更好，但如果你非要宋体，那就得加载网络字体，懂我意思吧？
