css-word-art: A JavaScript repository from archerU

文字特效

文字效果包含：字族、字号、字体样式、填充、描边、阴影

css 文字特效

文字特效的能力，本质上可以视为多层不同效果文字的叠加，使用 text-fill、text-stroke、background-clip等 CSS 属性加上多个元素重叠和偏移来形成特效的效果。注意：文字特效的优先级会高于 color 和 shadow，当文字包含特效时，color 和 shadow 的值会被忽略不再生效。所以当文字是渐变的时候，不能使用 shadow 来生成阴影。多个元素重叠意味着同一个元素有多组上述的属性，此时使用数组表示即可。

利用 h1 元素、 h1::before 和 h1::after 两个伪元素实现三层字体的嵌套。使用 text-stroke 实现文本描边效果，text-stroke 属性是向内填充，设置的像素如果很大，就会把字给挡住。最后使用 z-index 属性设置上述三个元素的堆叠顺序。

text-stroke是居中描边的。 text-stroke只有两个属性合并：text-stroke-width和text-stroke-color.就是描边的颜色和宽度。 text-shadow的属性可以不断叠加，但是text-stroke则不可以，如果想要实现多重描边效果，可以借助伪元素多层叠加模拟。

文字基础信息 + 文字特效

class textElement {
  // 特效文字
  type: 'effectText',
  config: {
    // 水平方向对齐
    align: 'left' | 'right' | 'center',
    // 垂直方向对齐
    verticalAlign: 'top' | 'middle' | 'bottom',
    // 文本大小
    fontSize?: number,
    // 字体
    fontFamily?: string,
    // 字号
    fontWeight?: number,
    // 字体样式，正常或斜体
    fontStyle?: 'normal' | 'italic',
    // 字体颜色
    color?: string,
    // 阴影颜色
    shadowColor?: string,
    // 阴影偏移，分别对应 x, y
    shadowOffset?: [number, number],
    // 阴影模糊半径
    shadowBlur?: number,
    // 文字样式
    textDecoration?: 'none' | 'line-through' | 'underline',
    
    // 数组里面可以做文字模版，数组里面每个元素定义一个独立样式的文字,属性没有定义，则会使用上面定义的全局属性。
    contents: {
      text: string, // 文字
      fontSize?: number,
      fontWeight?: number,
      fontFamily?: string,
      fontStyle?: 'normal' | 'italic',
      color?: string,
      shadowColor?: string,
      shadowOffset?: [number, number],
      shadowBlur?: number,
      textDecoration?: 'none' | 'line-through' | 'underline'
    }[],

    //样式特效数组
    effects: {
      // 文字填充色, text-fill 除了 CSS 颜色，还支持 linear-gradient，url 函数, 当 textFill 为一张图片时，将使用 background-clip 来实现
      fill: string,
      // 文字描边宽度, text-stroke-width
      strokeWidth: string,
      // 文字描边颜色, text-stroke-color
      stroke: string,
      // 特效偏移值, offset
      offset: [number, number]
    }[]
  }
}

// 渐变与描边 demo
{
  type: 'effectText',

  width: 580,
  height: 126,
  left: 0,
  top: 0,

  contents: [{
    fontSize: 48,
    fontWeight: 700,
    fontFamily: 'sans-serif',
    fontStyle: 'normal',
    text: '渐变与描边'
  }],
  effects: [{
    strokeWidth: 16,
    stroke: '#000',
    offset: [0, 0],
    fill: 'linear-gradient(0deg, rgb(255, 142, 193) 4%, rgb(255, 152, 185) 14%, rgb(255, 142, 193) 30%,rgb(255, 188, 156) 45%, rgb(255, 234, 119) 73%,rgb(255, 234, 119) 85%)'
  }]
}

// 不同文字包含不同样式 demo
{
  type: 'effectText',

  width: 352,
  height: 40,
  left: 0,
  top: 0,

  fontSize: 32,
  fontFamily: 'aria',
  color: '#000',

  content: [{
    text: '不同文字'
  }, {
    text: '包含',
    color: '#ff0000',
    fontSize: 48
  }, {
    text: '不同',
  }, {
    text: '样式',
    fontStyle: 'italic'
  }],
}

效果实现

纹理（图片实现）✅
渐变 ✅
- 单渐变 ✅
- 多重渐变 ✅
描边 ✅
- 单描边 ✅
- 多重描边（伪元素::before ::after 实现）✅
- 多重描边（外描边是圆形）❌
阴影 ✅
发光（阴影实现）✅
底纹（图片实现）✅

注意：渐变+阴影效果❌，多重描边+阴影效果❌

渐变 + 描边 ✅
渐变 + 阴影 ❌
渐变 + 发光 ✅
描边 + 阴影 ✅
描边 + 发光 ✅
阴影 + 发光 ✅
多重描边（最多3重）+ 阴影 ❌

渐变

// 3行代码， 注意3个属性的顺序

background-image: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
color: transparent;

1、给背景设置渐变色 css3 渐变 background-image 设置为渐变色，当然也可以简写 background。

2、规定背景的绘制区域 background-clip background-clip 属性， background-clip: border-box|padding-box|content-box;

3、让文字为透明色，背景色透出 color: transparent

4、多重渐变 linear-gradient 逗号拼接 linear-gradient(0deg, rgb(255, 142, 193) 4%, rgb(255, 152, 185) 14%, rgb(255, 142, 193) 30%,rgb(255, 188, 156) 45%, rgb(255, 234, 119) 73%,rgb(255, 234, 119) 85%);

描边

// 2行代码
-webkit-text-stroke-color: blue;
-webkit-text-stroke-width: 4px;

text-stroke只有两个属性合并：text-stroke-width和text-stroke-color，就是描边的颜色和宽度。

注意：text-stroke是居中描边的。text-stroke 属性是向内填充，设置的像素如果很大，就会把字给挡住。

阴影

// 1行代码

text-shadow: 4px 4px #fff, 8px 8px 3px green;

text-shadow的属性可以不断叠加，跟background-image 一致。

canvas 文字特效

纹理（图片实现）✅
渐变 ✅
- 单渐变 ✅
- 多重渐变 ✅
描边 ✅
- 单描边 ✅
- 多重描边（伪元素::before ::after 实现）✅
- 多重描边（外描边是圆形）❌
阴影 ✅
发光（阴影实现）✅
底纹（图片实现）✅

组合实现：

渐变 + 描边 ✅
渐变 + 阴影 ✅
渐变 + 发光（只能最后一个阴影发光）✅
描边 + 阴影 ✅
描边 + 发光（只能最后一个阴影发光）✅
阴影 + 发光（只能最后一个阴影发光）✅
多重描边（可以无限叠加）+ 多重阴影（可以无限叠加） ✅

字体库

在 Google Fonts 找到字体，Google Fonts 使用教程

1、增加 HTML link

<link href="https://fonts.googleapis.com/css2?family=Nosifer&display=swap" rel="stylesheet">

2、设置 css 代码即可

body {
    font-family: 'Nosifer', cursive;
}

参考练习

https://juejin.cn/post/7084551440231825421 https://segmentfault.com/a/1190000039362755

花字效果圈定

1、颜色渐变 <= 5 。支持不高于五种的颜色渐变，渐变可用于文字、描边和阴影。渐变超过五种，颜色变化效果在绝大多数场景下比较难体现。 2、描边 <= 3 。支持不高于三重的描边效果。多于三重的描边效果，很难看出细致的效果，且并不见得好看。 3、层数无限。支持不限层数的效果叠加。阴影、发光等效果，因为不同效果的要求，会存在很多层，这个在设计层面可能存在很多层的可能 4、支持文字和描边使用自定义图片

archerU/css-word-art