4. text

4.1 text1

1. text-shadow

text-shadow mdn

text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

4. 文本 - 图1

4. 文本 - 图2

4. 文本 - 图3

4. 文本 - 图4

4. 文本 - 图5

2. text-stroke

描边效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>text-stroke 描边效果</title>
  7.     <style>
  8.         body {
  9.             background-color: #000;
  10.         }
  12.         div {
  13.             position: absolute;
  14.             top: calc(50% - 50px);
  15.             left: calc(50% - 150px);
  17.             width: 300px;
  18.             height: 100px;
  19.             line-height: 100px;
  20.             text-align: center;
  21.             /* color: #ddd; */
  22.             font-size: 80px;
  23.             font-weight: bold;
  25.             font-family: simsun;
  26.             /* 仅在 google chrome 下好使
  27.             第一个参数表示的是描边的粗细 第二个参数表示描边的颜色
  28.             成哥的视频讲解中 使用字体 simsun 可以实现把边给描到字体里面
  29.             我在 windows 下测试发现看不到效果 也许只有在 mac 上才能看到效果
  30.             也有可能是和浏览器相关 成哥教学视频用的 chrome 是 70.0 版的 我当前使用的 chrome 是 88.0 版本的 */
  31.             -webkit-text-stroke: 1px #008c8c;
  32.             color: transparent;
  33.         }
  34.     </style>
  35. </head>
  37. <body>
  38.     <div>大忽悠</div>
  39. </body>
  41. </html>

4. 文本 - 图6

3. @font-face

@font-face mdn

作用
  下载外部字体包
语法
  @font-face {
      font-family: '',
      src: url() format(),
        url() format(),
        url() format();
  }
    参数
      font-famlily 用于给引入的字体包命名
      src 外部字体包的 url 用于下载外部字体包

notes
  应用场景
    若是中文的页面 一般不会用它来引入所有的汉字, 因为数量太大了, 2w多个, 请求的时间会很长
    但是英文的页面 差不多就那么 26 个字母 算上大小写 也就 52 个 (可能还包括一些其他特殊字符) 总共算起来也没多少字体 大小可能就在 1MB 左右 这种情况下 也许会使用它来引入字体包
    页面中的一些小图标 有一些图标本质上就是字体 我们也可以用它来引入这些图标
  字体格式
    .ttf truetype 微软 苹果
    .opt opentype 微软 abode (比truetype高级 可以说是它的升级版)
    .woff woff (.tff 和 .opt 的结合版)
    .eat ie
    .svg H5
    不同格式之间的区别 优缺点 啥的 涉及到操作系统底层的东西了... 这里不作详细说明
  format (字体格式提示器)
    MIME协议 ((Multipurpose Internet Mail Extensions)多用途互联网邮件扩展协议)
      该协议被内置到了浏览器身上 主要用于打开一些浏览器无法识别的文件 比如 .pdf .txt .ttf
      当浏览器无法识别某个文件时 通过 MIME 协议 借助其他程序来识别这些文件 (MIME协议中放的就是映射表 通过它就可以知道 干啥事 找啥人)
      内置到浏览器上的协议 不是实时更新的 但是协议自身是会实时更新的
      比如说 就版本的 MIME协议 无法识别 .woff文件 但是 新版本的 MIME协议 可以识别 而 某个浏览器内置的就是旧版本的 MIME协议 那么它就无法识别该文件 就会导致资源无法请求到 错误代码 404 啥的
    format的作用可以理解为 告诉浏览器引入的是啥文件 就类似于 给 MIME协议 里头添加映射

4.2 text2

1. white-space

white-space mdn

2. tab-size

tab-size

3. word-break overflow-wrap(word-wrap)

word-break mdn
overflow-wrap mdn

4. columns

columns mdn

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>columns</title>
    <style>
        div {
            /* 300px 每一列的宽度为 300px
            4 共分为 4 列 */
            columns: 300px 4;
            /* 50px 列与列之间的间隙为 50px */
            column-gap: 50px;
            /* 列与列之间的分割线 */
            column-rule: 1px dashed #008c8c;
        }

        p {
            /* 跨列显示 */
            column-span: all;
            text-align: center;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div>lorem100<p>lorem10</p>lorem500</div>
</body>

</html>

4. 文本 - 图7

columns 小说阅读翻页效果