CSS3 文字

文字

自动添加连字符

再也不需要text-align: justify了。

前提是在单词可换行处添加。

<p>
  President Clinton's de&shy;ci&shy;sion on Apr.8
  to send Chin&shy;ese Premier Zhu Rong&shy;ji pack&shy;ing
  with&shy;out an agree&shy;ment on China's
  en&shy;try into the World Trade Or&shy;gani&shy;za&shy;tion
  seemed to be a mas&shy;sive mis&shy;cal&shy;cu&shy;la&shy;tion.
</p>

p {
  hyphens: auto;
}

强行换行

使用 Unicode 提供的换行符：0x000A。

dd::after {
  content: "\A";

  // 防止和其他空白字符互相吞噬
  white-space: pre;
}

背景条纹

重点：线性渐变背景平铺，但需要预留出上下padding。

div {
  background: salmon;
  background-image: linear-gradient(rgba(0, 0, 0, 0.15) 50%, transparent 0);

  // 由于有两种背景色，高度需是行高的 2 倍
  background-size: auto 3em;

  // 切除 padding 的影响
  background-origin: content-box;

  color: white;
  line-height: 1.5;
  padding: 0.5em;
  width: 200px;
}

改变`tab`缩进的大小

对代码演示网站非常有用。

pre {
  tab-size: 2;
}

为指定的字符定义特殊字体

重点：@font-face + unicode-range。

@font-face的src属性允许指定本地字体。
unicode-range指定此字体适用的文字范围。允许的值格式例子：U+26, U+4??, U+2665-2670。

@font-face {
  font-family: Ampersand;

  // 无需下载网络字体
  src:
    local('Baskerville-Italic'),
    local('GoudyOldStyleT-Italic'),
    local('Palatino-Italic'),
    local('BookAntiqua-Italic');

  // & 字符
  unicode-range: U+26;
}

h1 {
  font-family: Ampersand, Helvetica, sans-serif;
}

自定义下划线

默认的text-decoration: underline过丑，往往需要自制。

线性渐变可以完美解决这个问题。

p {
  // 用同色的线性渐变制作图片
  background: linear-gradient(salmon, salmon) no-repeat;

  // 粗细为 1px 的下划线
  background-size: 100% 1px;

  // 从下方开始计算
  background-position: 0 1.15em;

  // 划线经过 g p y 等字母的时候，可以留下一点缝隙
  text-shadow: 0.05em 0 white, -0.05em 0 white;
}

也可获得虚线效果：

p {
  background: linear-gradient(90deg, salmon 66%, transparent 0) repeat-x;
  background-size: 0.3em 2px;
  background-position: 0 1.15em;
}

写实风格

浮雕效果：

div {
  background: salmon;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 0.03em 0 rgba(255, 255, 255, 0.8);
}

阴影效果：

div {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
}

描边效果：四个 shadow 往四角方向叠加。

注意：不能太粗，不然边缘处叠不上。

span {
  background: salmon;
  color: white;
  letter-spacing: 1px;
  text-shadow:
    1px 1px rgba(0, 0, 0, 0.8), -1px -1px rgba(0, 0, 0, 0.8),
    1px -1px rgba(0, 0, 0, 0.8), -1px 1px rgba(0, 0, 0, 0.8);
}

发光字

span {
  background: salmon;
  color: white;
  padding: 0.25em 0.5em;

  // 默认 currentColor
  text-shadow: 0 0 0.1em, 0 0 0.3em;
}

浮雕字

连用 N 个浮雕阴影。

span {
  background: salmon;
  color: white;
  text-shadow:
    0 1px hsl(0, 0%, 85%),
    0 2px hsl(0, 0%, 80%),
    0 3px hsl(0, 0%, 75%),
    0 4px hsl(0, 0%, 70%),
    0 5px hsl(0, 0%, 65%),

    // 真正的阴影
    0 5px 10px black;
}

文字