字体排印

font 属性

使用 font 属性时: font-size 以及 font-family 属性在尾部必填而且必须得照这个顺序。其它可选属性还有: font-weight、font-style 等。此外还能使用 line-height 属性, 使用 line-height 的格式为 font-size/line-height。

和字体相关的 css

连字符断行: hyphens: auto
插入换行: 替代 <br /> 可以使用如下使用:

.demo::after {
  content: '/A';    /* 表示 Unicode 里的 `0x000A`/ */
  white-space: pre; /* 保留空格 */
}

字体单位

相对视窗
- 1vw: 视窗宽度的 1/100, 100 vw 等于整个视窗宽度;
- 1vh: 视窗高度的 1/100, 100 vh 等于整个视窗高度;
- 1vmin: 取视窗宽度和视窗高度最小值的 1/100;
- 1vmax: 取视窗宽度和视窗高度最大值的 1/100;
相对 font-size
- rem: 相对 html 中的 font-size 进行转换(如果根元素的 font-size 小于 12px 则以 12px 来计算);
- em: 相对父元素(或者自己层级)的 font-size 进行转换; font-size: 1em 等价于 font-size: 100%;

px 与 vw 单位间的转换:

1vw = document.documentElement.clientWidth(px) / 100
(100 / document.documentElement.clientWidth)vw = 1px

px 与 rem 单位间的转换:

rem * (100vw / 3.75) = px

因而 rem 与 px 的比率为: 3.75 / 100vw 或者 3.75 / (document.documentClientWidht.clientWidth)

rem 的使用

移动端中，通常将 1rem 设置为 100px, (一般不设置为 10px/1px 的原因是在移动端机型中存在 12px 最小显示字体限制)

相关测试

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        html {
            font-size: calc(100vw / 375)
        }
    </style>
</head>

<body>
    <div class="test" style="font-size: 16rem;margin-top: 16rem;padding: 16rem">测试</div>
</body>

</html>

html {
  font-size: calc(100vw / 3.75) /* 表示在 1 dpr 屏上, 此时 1 rem 相当于是 100px */
}

阅读到文本行的斑马条纹