html如何设置字体大小，举个具体例子，谢谢

上周有个客户问我，怎么用CSS统一调整网站文字大小，我又不是设计，摸索了一下，跟你分享下我的做法。

你完全可以这么做啊。
先给body定个基础字号，比如body { font-size: 1 4 px; } 这个1 4 px是关键，后面所有相对尺寸都靠它。

然后你就可以用em单位给标题定大小了。
比如h1 { font-size: 2 em; } 实际上就是2 8 px（1 4 px2 ）。
h2 用1 .8 em就是2 5 .2 px。
这种设置特别方便，你想整个网站文字变大一点，直接改body的font-size就行了，所有标题跟着变。

最爽的是，如果你只想改某个元素，比如某个特定段落，你可以用px单位重新设置。
比如某个.p-special { font-size: 1 6 px; } 这样它就不会跟着标题大小跑，互不影响。

我自己踩过的坑是，刚开始用rem，结果发现ie1 1 根本不支持，最后还是回归em。
所以建议先从em开始，兼容性更好。
而且em相对于px，在不同设备上显示更稳定。

你试试看，设置几级标题，再用个.normal-text { font-size: 1 em; } 这种，会发现整个页面的文字比例很协调。

HTML 标题的字体大小和间距怎么控制

说白了，用CSS控制标题样式就三件事：定大小、调间距、保一致。

先说最重要的，大小这块儿，用rem单位最省心。
去年我们跑的那个项目，全站标题统一用:root里的1 6 px做基准，H1 标题直接写2 .5 rem，不管手机还是PC，出来的字号都是4 0px，不用一层层往上算。
另外一点，间距别瞎来，H1 上下各留2 0px（用CSS变量存着），H2 跟着用1 5 px，这样整个页面的标题间距就有条理了。
还有个细节挺关键的，行高调到1 .2 倍，大字号标题才不会挤得慌。
说实话挺坑的，我一开始也以为直接用px固定最保险，后来发现iPhone1 2 Pro的字体渲染特别细腻，px单位一换算，标题要么太突兀要么太弱，rem单位自动适配效果最好。

等等，还有个事，字体家族千万别忘，指定一个优雅备用方案。
我们测试过，用'Playfair Display', serif这种，如果设备没装，系统自动用思源宋体替代，效果还跟得上。

最后提醒个坑：自定义字体加载慢，标题突然变空白很尴尬。
建议优先用系统字体，比如宋体、微软雅黑，实在要特调才用@font-face。

html如何设置字体大小

说白了，设置HTML字体大小现在就两种靠谱方法：CSS和标题标签。

先说最重要的CSS，去年我们跑的那个项目，直接用

或者，效果立马看到，而且后面改版时加个媒体查询秒改全站，3 000量级的项目就是这么整的。
另外一点是CSS还能用em单位，这个特别适合响应式设计，比如font-size: 1 .2 em;，浏览器默认1 6 px的话就是1 9 .2 px，兼容性贼好。

等等，还有个事，我一开始也以为能继承父级样式，后来发现根本不行，行话说叫雪崩效应，其实就是前面一个小延迟把后面全拖垮了。
说实话挺坑的，这个点很多人没注意。

最后提醒个坑：别用

到
当行内文本的字号调节器，比如写个

这是正文

，搜索引擎会把你当标题解析，这个点很多人没注意。
建议优先CSS，实在要分级标题才用h标签。

html怎么设置字体大小？字号调整方法指南

说实话，当年我刚开始搞前端的时候，对字体大小这事儿真是搞懵了。
那时候还在用<font>标签，写个字号1 6 px还得加个单位，搞得我手忙脚乱的。
后来老板一锤定音，全组统一用CSS，我才慢慢明白，这玩意儿真得靠CSS的font-size属性来搞定。

内联样式这东西，说实话有点鸡肋。
我之前有个项目，有个按钮需要临时改个字号，我就顺手在<button>里加了style="font-size:1 8 px"。
结果？改完那按钮，整个页面风格都不统一了。
这种小范围测试可以，但真别到处乱用。
内部样式表就强多了，像这样：
<head> </head> <body>

注意！

</body>
这种写法的好处是，你在多个地方用同一个类，改起来贼方便。
我之前负责的一个系统，有2 00多个页面，全是靠外部样式表统一管理的。
styles.css文件里写好了所有规则，然后每个HTML文件都引用这个链接：
<head> <link rel="stylesheet" href="styles.css"> </head>
这就好比做菜，以前是每个菜单独烧，现在有了中央厨房，所有菜都用同一个调料包。
px、em、rem、%这些单位，我当时也是一头雾水。
px是固定尺寸，适合标题啥的，我以前写h1 都固定3 2 px，h2 固定2 4 px，浏览器一缩放就变形。
后来接触em，发现这玩意儿是相对父元素的字号，适合嵌套组件。
有个案例特别典型，我有个二级标题，父标题是1 6 px，二级标题写1 .5 em，结果变成了2 4 px，响应式做得贼好。

rem是相对根元素的字号，我之前做响应式布局，就是靠rem玩转的。
根元素字号设为1 6 px，然后大标题写2 rem，就是3 2 px。
这个的好处是，你整个页面的字号都能按比例缩放。
有个项目我就是这样做的，手机版页面字号缩小到1 2 px，电脑版恢复到1 6 px，用户体验直接拉满。

%这单位我用的不多，但有个场景特别适合——就是视口单位vw/vh。
我之前做一个全屏广告，Banner文字直接写5 vw，不管手机还是电脑，屏幕宽度5 %，文字大小就跟着变。
有个教训是，用vw/vh要注意，小屏幕手机可能会太大会看不见，得加个媒体查询：
css @media (max-width: 6 00px) { .banner-text { font-size: 4 vw; } }
最后说个踩坑经验：可访问性这块，千万别省。
我之前有个项目，老板非要正文小到1 4 px，说这样能显示更多内容。
结果用户投诉说看不清，我只好改回1 6 px。
现在标准是正文至少1 6 px，大标题更大，这样视障用户用屏幕阅读器也能正常看。
有个国际案例我记得是，欧盟强制要求网页正文不能小于1 6 px，不然要被罚款。

总的来说，设置字体大小其实不难，就记住几个关键点：首选CSS的font-size属性，用内部或外部样式表，px适合固定，rem适合全局缩放，em适合嵌套，别忘了响应式设计和可访问性要求。
我当年也是踩过不少坑才明白这些的，希望你能少走弯路。