Day 7 - 文字使用方式

字体大小

相信大家以往在写 CSS 时，也有写过像这种 text-12、font-12 看起来很聪明的蠢事吧！其实这是不太好的写法，相对也会造成 CSS 肥大的负担。最好的方式是像 Bootstrap 使用 fs-1、fs-2，或是像 Tailwind 使用 text-{size} 来控制字体大小。

Tailwind 内建已定义了常见的13组文字级距，而 base 就是大家所熟悉的 16px，文字间也帮咱们设定了相应的行高，让文字不会上下黏在一起。来看看官方标配的大小有哪些？基本上现代框架都已使用 rem，威尔猪这边帮大家转换整理成孰悉的 px。

你们看看，是不是都是大家常用的文字大小。当然如果级距不够，想在新增的，开启 tailwind.config.js 吧，在 theme 的 extend 底下加入 fontSize，并在里面写入想增加的级距，范例如下:

// tailwind.config.js

module.exports = {
  theme: {
    ... ,
    extend: {
      fontSize: {
        'text-10xl': '10rem',
      },
    },
    ... ,
  },
  ... ,
}

其实威尔猪觉得大部分专案都已适用，如果真的有少部分特殊的文字尺寸，还记得前几篇的 JIT 模式吧，不妨直接使用 text-[设定尺寸] 会比较方便。

但如果设计师还是觉得预设的字距跟行高 Not good，不能搭配出这高大上的版面，那我们就再进入 tailwind.config.js 来修改吧，一样方式为 theme 底下加入 fontSize，并在里面写入想修改的尺寸，范例如下:

// tailwind.config.js

module.exports = {
  theme: {
    ... ,
    fontSize: {
      '2xl': ['24px', {
        letterSpacing: '-0.01em',
      }],
      '3xl': ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    },
    ... ,
  },
  ... ,
}

如果只单写其中一个，代表另一个将使用官方预设的字距跟行高。

字体粗细

以往 Bootstrap 所用的是 font-weight-bold，嗯～果然简单粗暴易明了，新版改为 fw-bold，写法相对简洁，不过基本也就那四种粗细，但在 Tailwind 的世界里，胖瘦居然分了九种，从 100-900 把 CSS 有的通通吐给你，下面为预设粗细的写法对照:

字体样式

• 斜体
  写法方式很简单，就只有分 italic、 not-italic。很神奇，居然没有使用其它框架爱用的 normal。

• 下底线、删除线
  不罗嗦，就是 underline、no-underline、line-through，依然没有 normal。

• 大小写及首字大写转换
  使用方式 uppercase、lowercase、capitalize、normal-case。

字母间距

Tailwind 间距的预设 class 写法和 CSS 及一般框架有点不同，是使用 tracking-，而不是我们所熟悉的 ls- 或是 letter-spacing-，其实威尔猪也记不太起来，没关系，等需要用时再来查找威尔猪这篇就好了。

这边注意官方预设用的是 em。

当然你也可以到 tailwind.config.js 的 theme 里的 letterSpacing 去新增或修改预设的数值：

  // tailwind.config.js
  
 module.exports = {
  theme: {
    ... ,
    letterSpacing: {
      tightest: '-0.075em',
      tighter: '-0.05em',
      tight: '-0.025em',
      normal: '0',
      wide: '0.025em',
      wider: '0.05em',
      widest: '0.1em',
    }
    ... ,
  },
  ... ,
}

文字行高

这个 class 的预设写法和间距一样，威尔猪也很容易忘，在 Bootstrap 是写 lh-，Tailwind 这边要用 leading- 的方式， 它分为两种方式：相对行高、固定行高。

• 相对行高：这个可以依据现在文字的大小，来给它一个适当的配适，Bootstrap 和一般用的文书软件也都是使用这种方式 (如：1.5 倍行高)，威尔猪大部分也是使用这种。

• 固定行高：这个方式是不考虑当前文字的大小，直接给一个固定的值。要注意写法後面的值是 3-10，和之前的 100-900 不同。

当然你想增加行高也是可以的，一样要到 tailwind.config.js，在 theme 的 extend 里加入 lineHeight，范例如下：

  // tailwind.config.js
  
 module.exports = {
  theme: {
    ... ,
    extend: {
      lineHeight: {
         'leading-looser': '2.5',
         '12': '3rem',
      }
    }
    ... ,
  },
  ... ,
}

前面的属性依然可以自定 (如：'extra-xl')，只要别人看得懂就好，这边分别写了 2 种写法。

文字颜色

在颜色那篇有稍微提到使用文字颜色的方式：text-{颜色}-{明度 (50-900)}。这边要多说另外 2 种使用的 class：

• 透明色：text-transparent
  可想而知就是让文字透明，类似 text-opacity-0，不过不一样的地方是，不需像 opacity 一样前面需要加入颜色，因为透明本来就属於颜色的一种。

• 当前颜色：text-current
  这个会往父层找你设定使用的颜色，如果没有，那它会再往祖父层来继承，如果啥颜色都没有，那它就会使用浏览器预设的颜色，这方式适合为同一组件父层设定颜色变量。

文字透明度

使用方式为 text-opacity-{amount}，不过要记住使用透明度前，一定要有颜色哦。预设数值为下表：

如果想增加透明度，开启 tailwind.config.js，在 theme 的 extend 里加入 opacity，范例如下：

  // tailwind.config.js
  
 module.exports = {
  theme: {
    ... ,
    extend: {
      opacity: {
         '15': '0.15',
         '35': '0.35',
         '45': '0.45',
      }
    }
    ... ,
  },
  ... ,
}

如果只想增加文字的透明度，其他背景、边框等都不需要，那就将 opacity 改成 textOpacity 就好了：

  // tailwind.config.js
  
 module.exports = {
  theme: {
    ... ,
    extend: {
      textOpacity: {
         '15': '0.15',
         '35': '0.35',
         '45': '0.45',
      }
    }
    ... ,
  },
  ... ,
}

文字平滑度

什麽！文字也有平滑度，相信这个应该不少人都很陌生吧，威尔猪也只有在专案上用过一次，因为萤幕使用的是像素，难免会有锯齿状，这个可以让文字看起来更细腻，通常只用在 Mac OS，基本上一般人没比较过是无感的，只有那种天生鹰眼的设计师有感。有需要的人就使用吧，用不到就当冷知识好了。使用的 class 也不太好记：antialiased 和 subpixel-antialiased

• antialiased (灰度渲染)：常用在 iOS 和 Android 等移动设备。
• subpixel-antialiased (次像素渲染)：常用在 Mac OS 和 MacType For Windows。

这个坑太深了，有需要的同学们再自行科普。

以上就是今天文字使用的方式，还有一些威尔猪想放在後面的篇幅一起讲，那咱们明天见。