CSS实现字体描边的方法

最近写uni项目实现字体描边，但是发现仅仅使用css的属性会覆盖文字本身；

-webkit-text-stroke:8rpx #202020;

参考了”WEB嘟嘟“CSS实现字体描边的方法_WEB嘟嘟的博客-CSDN博客_css字体描边该博主使用了两层div绝对定位的方式实现了如下效果。

 但是使用后发现，如果将改字体封装为组件，使用改字体组件会影响上层div的flex布局。于是我再老哥的基础上又增加了一层div用来给组件一个大小，方便定位。写再uni的代码当中替换view为div，rpx为px即可再h5中正常使用。

 

<template>
	<view class="fontStoke">
		<view class="hidden" :style="{fontSize:fontSize+'rpx'}">
			{
  {text}}
		</view>
		<view class="stroke" :style="{fontSize:fontSize+'rpx'}">
			{
  {text}}
		</view>
		<view class="stroke border