font-family需按“高保真→系统中文字体→通用族”顺序书写并加引号,font-size优先rem以支持缩放,font-weight须匹配字体实际字重,font-smoothing非标准且跨平台效果差。

font-family 怎么写才真正生效
浏览器不会无条件接受你写的字体名,font-family 是一个备选列表,不是单选答案。写错顺序、漏掉引号、忽略系统字体 fallback,都会导致样式“看起来没变”。
- 中文字体名含空格或中文时必须用引号包裹,比如
"Microsoft YaHei"、"PingFang SC",不加引号在部分浏览器里直接失效 - 必须以通用字体族(
serif、sans-serif、monospace)收尾,否则 macOS 或 Linux 下可能渲染成 Times New Roman - 优先级从左到右,推荐写法:
font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;—— 先写高保真字体,再写系统主力中文字体,最后兜底
font-size 单位选 px 还是 rem
px 看起来简单,但一关缩放就露馅;rem 依赖根元素 font-size,不设好反而更难调。关键不在“哪个更好”,而在“谁控制缩放权”。
- 移动端或需支持系统字号放大的场景,必须用
rem或em,px会被强制忽略(iOS Safari 对px文字有最小尺寸限制) - 用
rem前先确认html根节点的font-size是否被重置过,比如html { font-size: 62.5%; }是为了把 1rem 映射为 10px,但若页面已有其他 CSS 重设了根字号,这个换算就崩了 - 纯工具类组件(如图标文字、提示框小字)可用
px锁死,避免被用户缩放干扰布局
font-weight 数值不生效的常见原因
font-weight 不是所有数字都管用,也不是所有字体都支持全部字重。浏览器会自动“就近匹配”,你写 font-weight: 600,但字体文件只提供了 400 和 700,那它就给你 700。
奥硕企业网站管理系统具有一下特色功能1、双语双模(中英文采用单独模板设计,可制作中英文不同样式的网站)2、在线编辑JS动态菜单支持下拉效果,同时生成中文,英文,静态3个JS菜单3、在线制作并调用FLASH展示动画4、自动生成缩略图,可以自由设置宽高5、图片批量加水印,可以自由设置字体,大小,样式,水印位置(同时支持文字或图片类型水印)6、强大的标签式数据调用,可以调用(新闻,产品,下载,招聘)支持
- 检查字体是否真的包含对应字重:用浏览器开发者工具的“Computed”面板看最终解析出的
font-weight值,不是看 Styles 里你写的那个 - CSS 中
bold等价于700,normal等价于400,但像500、600这类中间值,多数免费中文字体根本不提供,写了也白写 - 引入 Web Font 时,务必在
@font-face中显式声明font-weight,比如font-weight: 500;,否则即使字体文件里有,CSS 也不认
中文网页为什么总要用 font-smoothing
不是所有系统都默认开启亚像素渲染,尤其 macOS 在非 Retina 屏、Windows 在 ClearType 关闭时,文字边缘发虚或偏灰。但 -webkit-font-smoothing 和 font-smoothing 是非标准属性,行为不一致。
立即学习“前端免费学习笔记(深入)”;
-
-webkit-font-smoothing: antialiased在 macOS 上让文字更纤细清晰,但可能降低可读性;subpixel-antialiased是默认值,别乱覆盖 - Windows 下基本无效,强行加还可能触发 IE 的怪异渲染模式
- 真正跨平台可控的方式是靠字体本身:选用支持 hinting 的中文字体(如
"HarmonyOS Sans"、"OPPO Sans"),比硬加 CSS 属性靠谱得多









