CSS – 实战 Font

前言

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

参考: 

平面设计 – 字体

CSS – Font

CSS – rem, em, px

选 font-family

通常会选 2 款 font-family. 要形成对比嘛. 对设计没有研究的话, 最好是选一些比较 popular 的字, 然后好读就可以了.

CSS 可以这样定义

$font-family-primary: 'Open Sans', sans-serif;
$font-family-accent: 'Montserrat', sans-serif;

一个主字体, 配上一个凸显字体. 

heading, 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 可以这样定义

_variables.scss

$font-size-base-small: 1rem; // 16px
$font-size-base-big: 1.125rem; // 18px
$font-size-scale: 1.2;
$font-size: (
  display: // 64.50px
  calc(
      var(--font-size-base) * var(--font-size-scale) * var(--font-size-scale) *
        var(--font-size-scale) * var(--font-size-scale) * var(--font-size-scale) *
        var(--font-size-scale) * var(--font-size-scale)
    ),
  headline1: //53.75px
  calc(
      var(--font-size-base) * var(--font-size-scale) * var(--font-size-scale) *
        var(--font-size-scale) * var(--font-size-scale) * var(--font-size-scale) *
        var(--font-size-scale)
    ),
  headline2: //44.79px
  calc(
      var(--font-size-base) * var(--font-size-scale) * var(--font-size-scale) *
        var(--font-size-scale) * var(--font-size-scale) * var(--font-size-scale)
    ),
  headline3: // 37.32px
  calc(
      var(--font-size-base) * var(--font-size-scale) * var(--font-size-scale) *
        var(--font-size-scale) * var(--font-size-scale)
    ),
  headline4: // 31.10px
  calc(
      var(--font-size-base) * var(--font-size-scale) * var(--font-size-scale) *
        var(--font-size-scale)
    ),
  headline5: calc(var(--font-size-base) * var(--font-size-scale) * var(--font-size-scale)),
  // 25.92px
  headline6: calc(var(--font-size-base) * var(--font-size-scale)),
  // 21.6px
  body: var(--font-size-base),
  // 18px
  caption: calc(var(--font-size-base) / var(--font-size-scale)),
  // 15px
  overline: calc(var(--font-size-base) / var(--font-size-scale) / var(--font-size-scale)),
  // 12.5px
);
@function font-size($key) {
  @return list.nth(map-get($font-size, $key), 1);
}
@mixin font-size($key) {
  $values: map-get($font-size, $key);
  font-size: list.nth($values, 1);
  @if (length($values) == 2) {
    line-height: list.nth($values, 2);
  }
}

base.scss

:root {
  --font-size-base: #{$font-size-base-small};
  --font-size-scale: #{$font-size-scale};

  @include media-breakpoint('xl') {
    --font-size-base: #{$font-size-base-big};
  }
}
body {
  font-family: $font-family-primary;
  font-size: font-size('body');
}

上面这套是这篇学来的

它是用 variables 来管理, 好处是可以局部换, 但其实也没有这个需求.

另一个方法是就简单点用 :root rem 62.5%, 1rem = 10px. 也是可以达到相同效果.

调用

.title {
  @include font-size('headline6');
  font-family: $font-family-accent;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
}

注: Tailwinds CSS 会把 line-height 和 font-size 一起定义. 虽然我没有这样做. 但是我觉得也是 ok 的.