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%;

pxvw 单位间的转换:

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

pxrem 单位间的转换:

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 */
}
  • 阅读到文本行的斑马条纹