CSS – 实战 Font

前言

这篇想整理一下在网页开发中, 字体是如果被处理的.

先看完:

平面设计 – 字体

CSS – Font / Text 属性

CSS – Font Family

CSS – word-break, overflow-wrap, word-wrap, white-space

CSS – ellipsis and line-clamp

CSS – rem, em, px

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

那么多尺寸, 怎么开始呢?

type-scale.com

选一个 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));
  }
}