方法一:利用多层文字阴影text-shadow
不够理想。
- 最细的描边是跟号2(约等于1.414)px宽度的描 边,如果希望描边越宽,需要更多层的阴影来实现,这可能导致性能消耗大的问题。
- 同时,描边会有缺角,并不是完全包裹,在描边越宽的情况下越明显。
方法二(推荐):使用属性-webkit-text-stroke
-webkit-text-stroke
是应用于文字的描边特性的属性,尚未列入正式标准。
是以下属性的简写:
1 2 |
-webkit-text-stroke-width: 0 -webkit-text-stroke-color: currentColor |
需要额外的修正。
- 兼容性:需要-webkit-前缀支持。
- 描边是同时向内外延展的,描边越大,字的内容越少,所以需要多覆盖一层文字来修正。