【html】【css】 6 种方式实现自定义文字描边

实现方式简介

( .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 类似，不再赘述

效果展示

点击查看在线示例

示例代码

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 相同的原理实现描边