跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

html怎么改字体_网页文字样式设置指南【技巧】

font-family
指定字体,但别只写一个名字 浏览器不会“猜”你想要什么字体,它只会按顺序找系统里有没有。只写
"微软雅黑"
,在 macOS 或 Linux 上大概率 fallback 到默认无衬线体,文字可能突然变细、行高错乱。 必须提供备选字体链,例如:
font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
中文字体名带空格或中文,一定要加英文引号;英文字体如
Helvetica
可不加,但加了更稳妥 结尾的
sans-serif
不是可有可无——它是兜底,没它就可能触发浏览器默认 serif 行为(尤其旧版 IE) 避免用
@font-face
加载字体时漏掉
font-display: swap;
,否则文字会闪白或长时间不可见
font-size
别死磕像素值,优先用
rem
em
font-size: 14px;
看似简单,但用户缩放页面、系统设置大字体、iOS 强制最小字号时,它就卡死了——文字要么小到看不清,要么撑破容器。
rem
基于根元素
html
font-size
,适合全局响应式控制
em
相对父级,适合组件内缩放(比如按钮文字随图标大小联动) 移动端慎用
vw
做字号,横屏时字体会突然巨大,且 iOS Safari 对小
vw
值渲染不稳定 绝对单位
px
只在 icon font、固定尺寸徽标等极少数场景下合理 行高
line-height
不设单位才真“继承” 写
line-height: 24px;
line-height: 1.5em;
看似正常,但子元素继承后会变成固定像素值,一旦字号变化,行高就错位甚至重叠。 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 纯数字(如
line-height: 1.6;
)才是推荐写法——它表示“倍数”,子元素用自己字号 × 这个数 中英文混排时,
1.5
可能不够:汉字字形高、标点下沉,建议至少
1.6
起步,长段落可到
1.75
别给
line-height
!important
,它极易被后代元素意外覆盖,调试时难溯源 字体粗细
font-weight
数字值不是所有字体都支持 写了
font-weight: 600;
却没变粗?不是 CSS 失效,而是当前字体文件根本没包含这个字重。浏览器只能就近匹配,有时直接回落到
400
(常规)。 立即学习 “ 前端免费学习笔记(深入) ”; 查字体支持的字重范围:用浏览器 DevTools 的 Fonts 面板,或访问字体官网文档(如思源黑体支持 300/400/500/700) 避免依赖
font-weight: bold;
,它等价于
700
,但有些字体只有
400
900
两级 自定义字体用
@font-face
时,必须为每个字重单独声明
src
,不能靠浏览器“合成”粗体(合成效果糊、锯齿重) 字体这事,表面调几个属性,背后全是操作系统、字体文件、浏览器解析策略的叠加影响。最常出问题的不是写错,而是“写得太确定”——以为指定一个名字、一个像素、一个数值就能稳住,结果换台机器就走样。

相关文章