最近写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