5. CSS揭秘——字体排版

站长

2022年12月26日 06:34 · 阅读数 19

1. 连字符断行——英文单词

英文文档下，实现英文单词的断行。

可以通过一些软连字符（）来辅助浏览器进行断词
CSS属性 hyphens接受三个值：none、manual 和 auto

5. CSS揭秘——字体排版

manual 是hyphens属性的初始值，其行为可以在任何时候手工插入软连字符来实现断词折行的效果。而hyphens: none; 会禁用这种行为

<!DOCTYPE html>
<html lang="en">
  <style>
    div {
      width: 8.7em;
      font: 180%/1.4 Baskerville, serif;
      text-align: justify;
      background: #ccc;
      margin-top: 10px;
    }
    .app {
      /*禁用软连字符（`&shy;`）断行 */
      hyphens: none;
    }
  </style>
  <body>
    <div>
      “The only way to get rid of a temptation is to yield to it.”
    </div>
    <div>
      “The only way to get rid of a tempta&shy;tion is to yield to it.”
    </div>
    <div class="app">
      “The only way to get rid of a tem&shy;ptation is to yield to it.”
    </div>
  </body>
</html>

5. CSS揭秘——字体排版

2. 换行

5. CSS揭秘——字体排版

2.1 `<br>` 元素换行

5. CSS揭秘——字体排版

2.2 Unicode 换行字符`\A`

一个专门代表换行符的Unicode 字符：0x000A。在 CSS 中，这个字符可以写作 "\000A"，或简化为 "\A"。我们可以用它来作为 ::after伪元素的内容，并将其添加到每个 <dd> 元素的尾部

在 HTML 代码中输入换行符，默认情况下，这些换行符会与相邻的其他空白符进行合并。需要用 white-space: pre;保留源代码中的这些空白符和换行

<!DOCTYPE html>
<html lang="en">
  <style>
    dt,
    dd {
      display: inline;
      margin: 0;
    }

    dd {
      font-weight: 600;
    }
    /*对 <dt> 之前的最后一个 <dd> 来插入换行*/
    dd + dt::before {
      content: "\A";
      white-space: pre;
    }
    /*在每个前面有<dd> 的 <dd> 头部插入逗号*/
    dd + dd::before {
      content: ", ";
      font-weight: normal;
      margin-left: -0.25em;
    }

    body {
      font: 150%/1.6 Baskerville, Palatino, serif;
    }
  </style>
  <body>
    <dl>
      <dt>Name:</dt>
      <dd>Lea Verou</dd>

      <dt>Email:</dt>
      <dd>lea@verou.me</dd>
      <dd>leaverou@mit.edu</dd>

      <dt>Location:</dt>
      <dd>Earth</dd>
    </dl>
  </body>
</html>

5. CSS揭秘——字体排版

3. 文本行的斑马条纹

对整个元素设置统一的背景图像，一次性加上所有的斑马条纹。

可以在CSS 中用渐变直接生成背景图像，而且可以用 em 单位来设定背景尺寸，这样背景就可以自动适配font-size 了。

<!DOCTYPE html>
<html lang="en">
  <style>
    pre {
      padding: 0.5em;
      line-height: 1.5;
      background: hsl(20, 50%, 95%);
      /* 实现条纹背景*/
      background-image: linear-gradient(
        rgba(120, 0, 0, 0.1) 50%,
        transparent 0
      );
      background-size: auto 3em;
      /*浏览器解析 background-position时以 content box 的外沿作为基准，而不是默认的 padding box 外沿*/
      background-origin: content-box;
      font-family: Consolas, Monaco, monospace;
    }

    code {
      font: inherit;
    }
  </style>
  <body>
    <pre><code>while (true) {
      var d = new Date();
      if (d.getDate()==1 &amp;&amp;
          d.getMonth()==3) {
        alert("TROLOLOL");
      }
    }</code></pre>
  </body>
</html>

5. CSS揭秘——字体排版

3.1 CSS属性`white-space`——处理空白部分

5. CSS揭秘——字体排版

4. 调整制表符 tab 的空格数

包含大量代码的网页，在使用<pre>和 <code> 元素来显示代码时，设置默认tab的空格数

<!DOCTYPE html>
<html>
  <head>
    <style>
      pre {
        padding: 0.5em;
        line-height: 1.5;
        background: hsl(20, 50%, 95%);
        font-family: Consolas, Monaco, monospace;
      }
      #t1 {
        -moz-tab-size: 4; /* Firefox */
        tab-size: 4;
      }

      #t2 {
        -moz-tab-size: 10; /* Firefox */
        tab-size: 10;
      }
    </style>
  </head>
  <body>
    <h1>tab-size 属性</h1>
    <pre id="t1">
    I	use	tab-size	4
    </pre>
    <pre id="t2">
    I	use	tab-size	10
    </pre>
  </body>
</html>

5. CSS揭秘——字体排版

5. 字体的连字效果——`font-variant-ligatures`

5. CSS揭秘——字体排版

CSS简写属性font-variant，由很多新的展开式属性组合而成。其中之一叫作 font-variant-ligatures，专门用来控制连字效果的开启和关闭。

如果要启用所有可能的连字，需要同时指定这三个标识符：

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

font-variant-ligatures: none ，会把所有的连字效果都关掉
font-variant-ligatures:normal 为默认值，

5. CSS揭秘——字体排版

6. 华丽的 & 符号

用一种单独的字体美化某个特定的字符

<!DOCTYPE html>
<html>
  <head>
    <style>
      .amp {
        font-family: Baskerville, "Goudy Old Style", Garamond, Palatino, serif;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    HTML <span class="amp">&amp;</span> CSS
  </body>
</html>

5. CSS揭秘——字体排版

<!DOCTYPE html>
<html>
  <head>
    <style>
      @font-face {
        font-family: Ampersand;
        /*@font-face 规则中的 src 描述符还可以接受 local()函数，用于指定本地字体的名称*/
        src: local("Baskerville-Italic"), local("GoudyOldStyleT-Italic"),
          local("Garamond-Italic"), local("Palatino-Italic");
        /*unicode-range 描述符只在 @font-face 规则内部生效*/
        /*用于把字体作用的字符范围限制在一个子集内*/
        unicode-range: U+26;
      }

      h1 {
        font-family: Ampersand, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>HTML & CSS</h1>
  </body>
</html>

6.1 `unicode-range` 语法

unicode-range 的语法是基于“Unicode 码位”
加上 U+ 前缀,指定一个字符区间,比如 U+400-4FF
允许同时指定多个字符或多个区间，把它们用逗号隔开即可,比如 U+26, U+4??, U+2665-2670

5. CSS揭秘——字体排版

7. 自定义下划线

text-decoration: underline;

7.1 CSS背景渐变实现自定义下划线

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font: 250%/1.6 Baskerville, Palatino, serif;
      }

      a {
        background: linear-gradient(gray, gray) no-repeat;
        background-size: 100% 1px;
        background-position: 0 0.98em;
      }

      p:nth-child(2) a {
        background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
        background-size: 0.2em 2px;
        background-position: 0 0.98em;
      }
    </style>
  </head>
  <body>
    <p>
      “The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”
    </p>
    <p>
      “The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”
    </p>
  </body>
</html>

5. CSS揭秘——字体排版

7.2 直接使用下划线属性`text-decoration`

5. CSS揭秘——字体排版

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font: 250%/1.6 Baskerville, Palatino, serif;
      }

      a {
        /* text-decoration简写属性 */
        text-decoration-color: blue;
        text-decoration-style: wavy;
        text-decoration-line: underline;
        text-decoration-skip-ink: none;
      }
    </style>
  </head>
  <body>
    <p>
      “The only way to <a>get rid of a temptation</a> is to <a>yield</a> to it.”
    </p>
  </body>
</html>

5. CSS揭秘——字体排版

8. 现实中的文字效果

8.1 凸版印刷效果

凸起物的下方会产生阴影，而凹陷的底部边缘则会被打亮

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font: 250%/1.6 Baskerville, Palatino, serif;
      }

      p {
        padding: 0.8em 1em;
        background: hsl(210, 13%, 60%);
        color: hsl(210, 13%, 30%);
        text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.8);
      }

      p + p {
        background: hsl(210, 13%, 30%);
        color: hsl(210, 13%, 60%);
        text-shadow: 0 -1px 1px black;
      }
    </style>
  </head>
  <body>
    <p>“The only way to get rid of a temptation is to yield to it.”</p>
    <p>“The only way to get rid of a temptation is to yield to it.”</p>
  </body>
</html>

5. CSS揭秘——字体排版

8.2 空心字效果

<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
        margin: 0;
        color: white;
      }
      /*第一种方案——重叠多层轻微模糊的投影来模拟描边*/
      h1:first-child {
        text-shadow: 1px 1px black, -1px -1px black, 1px -1px black,
          -1px 1px black;
      }
      /*第二种方案-使用 SVG 来实现正常的粗描边效果*/
      h1 text {
        fill: currentColor;
      }
      h1 use {
        stroke: black;
        stroke-width: 6;
        stroke-linejoin: round;
      }

      body {
        background: deeppink;
        font: bold 200%/1 Rockwell, serif;
      }
    </style>
  </head>
  <body>
    <h1>CSS</h1>

    <h1>
      <svg overflow="visible" width="2em" height="1.2em">
        <use xlink:href="#css" />
        <text id="css" y="1em">CSS</text>
      </svg>
    </h1>
  </body>
</html>

5. CSS揭秘——字体排版

8.3 文字外发光效果—— `text-shadow`

文字外发光效果常用于凸显标题，或给链接添加鼠标悬停效果

只需要准备几层重叠的 text-shadow 即可，不需要考虑偏移量，颜色也只需跟文字保持一致

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #203;
        font: bold 500%/1 Rockwell, serif;
      }

      a {
        color: #ffc;
        text-decoration: none;
        transition: 1s;
      }

      a:hover {
        text-shadow: 0 0 0.1em, 0 0 0.3em;
      }
    </style>
  </head>
  <body>
    <a href="http://csssecrets.io">Glow</a>
  </body>
</html>

5. CSS揭秘——字体排版

8.4 文字凸起效果

主要思路就是使用一长串累加的投影，不设模糊并以 1px 的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #58a;
        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;
        font: bold 500%/1 Rockwell, serif;
      }
    </style>
  </head>
  <body>
    CSS3d
  </body>
</html>

5. CSS揭秘——字体排版把这些代码转换成SCSS预处理器的@mixin

<template>
  <h1>LXL long</h1>
</template>

<script>
export default {
  name: "AboutView"
}
</script>
<style lang="scss" scoped>

@mixin text-3d($color: white, $depth: 5) {
    $shadows: (); 
    $shadow-color: $color;
    @for $i from 1 through $depth {
        $shadow-color: darken($shadow-color, 10%);
        $shadows: append($shadows,
        0 ($i * 1px) $shadow-color, comma);
    }
    color: $color;
    /* append() 函数是用来将某个值插入到列表中，并且处于最末位。*/
    text-shadow: append($shadows,
    0 ($depth * 1px) 10px black, comma);
}
h1 { @include text-3d(#eee, 4); }
</style>

5. CSS揭秘——字体排版

9. 环形文字——SVG

让一个短句沿着圆形的路径进行排列

SVG 原生支持以任意路径排队的文字，而圆形只不过是一种特定的路径而已

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font: bold 120% Helvetica, sans-serif;
      }

      .circular {
        width: 30em;
        height: 30em;
        margin: 4em auto 0;
      }

      .circular svg {
        display: block;
        overflow: visible;
        transition: 10s linear transform;
      }

      .circular svg:hover {
        transform: rotate(-2turn);
      }

      .circular text {
        fill: currentColor;
      }
      .circular path {
        fill: none;
      }
    </style>
  </head>
  <body>
    <div class="circular">
      circular reasoning works because
    </div>
  </body>
  <script>
  // 这段脚本会遍历所有设置了 circular 类的元素，将其文本内容删除并
  //保存在变量中，然后为其填入必要的 SVG 元素
    function $$(selector, context) {
      context = context || document;
      var elements = context.querySelectorAll(selector);
      return Array.prototype.slice.call(elements);
    }

    $$(".circular").forEach(function(el) {
      var NS = "http://www.w3.org/2000/svg";

      var svg = document.createElementNS(NS, "svg");
      svg.setAttribute("viewBox", "0 0 100 100");

      var circle = document.createElementNS(NS, "path");
      circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");
      circle.setAttribute("id", "circle");

      var text = document.createElementNS(NS, "text");
      var textPath = document.createElementNS(NS, "textPath");
      textPath.setAttributeNS(
        "http://www.w3.org/1999/xlink",
        "xlink:href",
        "#circle"
      );
      textPath.textContent = el.textContent;
      text.appendChild(textPath);

      svg.appendChild(circle);
      svg.appendChild(text);

      el.textContent = "";
      el.appendChild(svg);
    });
  </script>
</html>

5. CSS揭秘——字体排版

1. 连字符断行——英文单词

2. 换行

2.1 <br> 元素换行

2.2 Unicode 换行字符\A

3. 文本行的斑马条纹

3.1 CSS属性white-space——处理空白部分

4. 调整制表符 tab 的空格数

5. 字体的连字效果——font-variant-ligatures

6. 华丽的 & 符号

6.1 unicode-range 语法

7. 自定义下划线

7.1 CSS背景渐变实现自定义下划线

7.2 直接使用下划线属性text-decoration

8. 现实中的文字效果

8.1 凸版印刷效果

8.2 空心字效果

8.3 文字外发光效果—— text-shadow

8.4 文字凸起效果

9. 环形文字——SVG

2.1 `<br>` 元素换行

2.2 Unicode 换行字符`\A`

3.1 CSS属性`white-space`——处理空白部分

5. 字体的连字效果——`font-variant-ligatures`

6.1 `unicode-range` 语法

7.2 直接使用下划线属性`text-decoration`

8.3 文字外发光效果—— `text-shadow`