|
实现方式简介 ( .native-text-shadow ) 直接使用 text-shadow 属性 ( .multiple-text-shadow ) 多次叠加 text-shadow 使得描边随着叠加次数变清晰 ( .native-webkit-text-stroke ) 直接使用 -webkit-text-stroke 属性 ( .improve-webkit-text-stroke ) 配合 -webkit-text-stroke 属性使用伪元素文本覆盖带有描边的文字 ( .svg-text-stroke ) 使用 svg 的 stroke 属性描边 ( .improve-svg-text-stroke ) 使用 svg 配合 svg 的 use 覆盖 描边的 svg 的 text ，原理与 improve-webkit-text-stroke 类似 实现原理 下例中 .text-stroke 的实现方式 利用 text-shadow 可叠加的属性在同一半径内叠加多个 文字阴影实现，叠加出现的锯齿使用 text-shadow 模糊属性弱化 叠加的 text-shadow 越多，text-shadow 的边缘越平滑，本例中 text-shadow 每间隔45度叠加一次，共叠加8次（叠加8次时 text-shadow的 x y轴平移距离较易计算） 。 下例中 .improve-webkit-text-stroke 的实现方式 使用没有文字描边的文字覆盖有 -webkit-text-stroke 描边的文字实现描边 下例中 .improve-svg-text-stroke 的实现方式 实现方式与 .improve-webkit-text-stroke 类似，不再赘述 效果展示 点击查看在线示例  示例代码 纯css 实现字体描边 字体描边 | font stroke 字体描边 | font stroke 字体描边 | font stroke 字体描边 | font stroke 字体描边 | font stroke 字体描边 | font stroke 字体描边 | font stroke 字体描边 | font stroke 字体描边 | font stroke tips： 本例中的 text-stroke 使用scss或less可以容易的函数化，方便直接调用使用 scss 示例/** * 文字描边 * * @param $width 文字描边宽度 * @param $blur 文字描边模糊距离 * @param $color 文字描边颜色 */ @mixin font-stroke($width,$blur, $color) { $obliqueWidth: $width * 1.414; text-shadow: 0 -$width $blur $color, /*上*/ $obliqueWidth -$obliqueWidth $blur $color, /*右上*/ $width 0 $blur $color, /*右*/ $obliqueWidth $obliqueWidth $blur $color, /*右下*/ 0 $width $blur $color, /*下*/ -$obliqueWidth $obliqueWidth $blur $color, /*左下*/ -$width 0 $blur $color, /*左*/ -$obliqueWidth -$obliqueWidth $blur $color; /*左上*/ } //调用 .text { //结果与示例代码中 text-stroke 相同 @include font-stroke(6px, 4px, #32003C) } 特点 .improve-webkit-text-stroke 只在webkit内核浏览器中有效果 文字内容必须与其伪元素同步 .text-stroke 没有模糊的描边会有锯齿感 .improve-svg-text-stroke 与 .improve-webkit-text-stroke 相比use 会自动同步text中的内容 文本样式操作没有html文本方便 背景 搜索纯css文字描边未找到理想的实现方案，大多都是说使用 text-shadow 或 -webkit-text-stroke ， -webkit-text-stroke 的描边会同时向内和向外扩张文字看起来会变细，而 text-shadow 大小与原字体一样，直接使用无法实现描边，想到 box-shadow 可以叠加,搜索发现text-shadow 也可以叠加， 那么在多个方向上以一定偏移量多次叠加 text-shadow 不就是文字描边了吗，8个方向上叠加后8个文字阴影后有锯齿，总不能继续叠加更多的文字阴影消除锯齿，使用 text-shadow 的模糊属性消除锯齿即可。 更新 突然想到 -webkit-text-stroke 的描边虽然是同时向内和向外扩张，但利用没用 -webkit-text-stroke 描边的 相同字符覆盖在其之上，不就是正常的文字描边了嘛。实现看上面代码 css .improve-webkit-text-stroke 部分。 突然看到svg也可以实现文字描边，参考 .improve-webkit-text-stroke 相同的原理实现描边 |
|
|
