CSS – 实战 Font
前言
这篇想整理一下在网页开发中, 字体是如果被处理的.
先看完:
CSS – word-break, overflow-wrap, word-wrap, white-space
CSS – Monospaced font & ch unit 等宽字体与 ch 单位
选 font-family
通常会选 2 款 font-family. 要形成对比嘛. 对设计没有研究的话, 最好是选一些比较 popular 的字体, 然后好读就可以了.
CSS 可以这样定义
:root { --font-family-primary: 'Open Sans', sans-serif; --font-family-accent: 'Montserrat', sans-serif; }
一个主字体, 配上一个凸显字体. 这个叫 font pairing. 可以参考: fontpair
heading, button, anchor 经常会用凸显字体, p 一般就用 primary 字体.
选 font-size & scale
那么多尺寸, 怎么开始呢?
选一个 base size 和 scale 比例, base font size 通常手机是 16-18px, 电脑 18-21px,
我一般上是用 1.2 scale, 16px, 18px.
然后就会有很多尺寸出来了.
Apply font-size
有一些人会把 font-size apply 到 element tag. 比如 h1...h6, p 分别对应上面的 scale font-size.
我个人不鼓励这种做法. 因为 heading 是用来表示 semantic HTML 的, 而权重和尺寸在不同页面或许会不一致.
所以比较好的做法是分开它们. 大概这样写
<h1 class="h4">Lorem ipsum dolor sit amet.</h1>
class h4 就是一个尺寸的代名词而已.
material 3 为我们取了很多 font-size 的名字
当然也不是说要跟着它, 只是作为一个参考.
我至少会这样设置
display
headline1 - 6
body
caption
overline
body 就是 base, 然后往上下 scale. 不一定每一个就升一个 level, 我是允许阔度的, 比如 display 是 headline1 往上两个 level 是 ok 的, 只要在曲线就可以了.
scale 的目的就是尽量维持一致性而已.
CSS 可以这样定义
_base.scss
$base-font-size: 16; $font-size-collection: ( display: 7, headline1: 6, headline2: 5, headline3: 4, headline4: 3, headline5: 2, headline6: 1, body: 0, caption: -1, overline: -2, ); @forward './module/core' as core-* with ( $base-font-size: $base-font-size, $font-size-collection: $font-size-collection ); :root { --rem-ratio: 1; --font-family-primary: 'Mulish', sans-serif; --font-family-accent: 'Taviraj', serif; --type-scale: 1.2; @include core.root-font-size(); @include core.media-breakpoint-up('2xl') { --rem-ratio: 1.2; } } body { font-family: var(--font-family-primary); font-size: var(--body); }
_core.scss

@function px2rem($value) { @return calc($value * 1rem / 16 * var(--rem-ratio, 1)); } // #region Design System Font Size @function font-size-with-scale($scale-level, $base-font-size: null) { $default-base-font-size: var(--base-font-size); $final-base-font-size: if($base-font-size != null, $base-font-size, $default-base-font-size); $font-sizes: ( 10: calc( $final-base-font-size * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) ), 9: calc( $final-base-font-size * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) ), 8: calc( $final-base-font-size * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) ), 7: calc( $final-base-font-size * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) ), 6: calc( $final-base-font-size * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) ), 5: calc( $final-base-font-size * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) ), 4: calc( $final-base-font-size * var(--type-scale) * var(--type-scale) * var(--type-scale) * var(--type-scale) ), 3: calc($final-base-font-size * var(--type-scale) * var(--type-scale) * var(--type-scale)), 2: calc($final-base-font-size * var(--type-scale) * var(--type-scale)), 1: calc($final-base-font-size * var(--type-scale)), 0: $final-base-font-size, -1: calc($final-base-font-size / var(--type-scale)), -2: calc($final-base-font-size / var(--type-scale) / var(--type-scale)), ); @return map-get($font-sizes, $scale-level); } $base-font-size: null !default; @function base-font-size() { @return px2rem($base-font-size); } $font-size-collection: null !default; @function font-size($name) { $level: map-get($font-size-collection, $name); @return font-size-with-scale($level, base-font-size()); } @mixin root-font-size() { @each $font-size-key-value in $font-size-collection { --#{list.nth($font-size-key-value, 1)}: #{font-size-with-scale( list.nth($font-size-key-value, 2) )}; } --base-font-size: #{base-font-size()}; } // #endregion End of Design System Font Size
上面这套是这篇学来的, 加上一点自己的小改装.
它是用 CSS Variables 来管理, 而且没有 override rem. 不像这种 :root rem 62.5%, 1rem = 10px
调用
.title { font-family: var(--font-family-accent); font-size: var(--headline6); text-transform: uppercase; font-weight: 700; color: white; }
如果想局部 override rem-ratio 可以这样写
.title { font-size: core.font-size('headline6'); @include core.media-breakpoint-up('2xl') { --rem-ratio: 2; } }
想要加大一号, 可以这样写
.title { --title-font-size: var(--headline6); --title-font-size-media: var(--title-font-size); font-size: var(--title-font-size-media, var(--title-font-size)); @include core.media-breakpoint-up('2xl') { --title-font-size-media: calc(var(--title-font-size) * var(--text-scale)); } }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2017-03-19 sql server auto increment - trace flag 272