CSS – Font / Text 属性
前言
之前学 W3Schools 时记入过一些 W3Schools 学习笔记 (1) – CSS Fonts.
由于太简单就没有另外写一篇, 现在感觉内容比较整齐了, 所以整理一篇出来.
属性
font-family
定义字体, 看这篇 CSS – Font Family
font-style
normal, italic, oblique. 绝大多数都是用 normal 的, italic 是斜体. oblique 没有用过
注: 不是所有字体都支持 italic 的哦
font-weight
字体的粗细
value = 100, 200, 300...900 (不是所有字体都有 100 到 900 哦)
100 叫 thin
200 叫 extra light
300 叫 light
400 叫 regular
500 叫 medium
600 叫 semi bold
700 叫 bold
800 叫 extra blod
900 叫 black
其它的很少冷门. 赋值最好不要用英文, 号码比较容易理解.
font-size
字体大小尺寸, 看这篇 CSS – rem, em, px
font
shorthand 来的
顺序
font-size 和 font-family 是 required 哦
text-decoration
最常用的是 underline, 做 anchor 下划线.
text-transform
最常用的是 uppercase
text-align
调 horizontal alignment. 比如 left, start, center, right, end
有一个比较冷门的叫 text-align: justify
W3Schools 的解释是 "Stretches the lines so that each line has equal width (like in newspapers and magazines)"
用于印刷, 其效果是这样的:
变宽的就是 justify
vertical-align
调 vertical alignment, 比如 top, start, center, bottom, end
line-height
默认是 1.2 左右, 它 depend on 字体. 不同字体不同大小都有不同的 line-height ratio.
1.2 算法是 font-size 乘于 1.2
比如 16px * 1.2 = 19.2px 就是 span 的高度.
关于 line height 和 half-leading 可以看这篇.
letter-spacing
它用来调节每一个单字母的间距. 很少用到, 只有在一些 button 的地方可能会放 1px 让它阔一些.
white-space, word-break, overflow-wrap, word-wrap
看这篇 CSS – word-break, overflow-wrap, word-wrap, white-space
text-overflow
主要用来做 ellipsis, 看这篇 CSS – ellipsis and line-clamp
color
调字体颜色
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析