requirements:
fonts with strokes, including Chinese characters and numbers, are required to be consistent with the design drawings made by PS
Environment: WeChat Mini Programs
attempted implementation:
- text-shadow: sets "up, down, left, left, right, left, right, left and right" eight directions of real shadows
.text {
font-size: 48rpx;
color: -sharpfff;
text-shadow: 3px 0 0px -sharp000, -3px 0 0px -sharp000, 0 3px -sharp000, 0 -3px -sharp000, 3px 3px -sharp000, -3px -3px -sharp000, 3px -3px -sharp000, -3px 3px -sharp000;
font-weight: 900;
}the effect is barely, but it doesn"t live up to expectations
- -webket-text-stroke: Stroke
.text {
font-size: 48rpx;
color: -sharpfff;
-webkit-text-stroke: 2px -sharp000;
font-weight: 900;
}Stroke will occupy the original font size, and a slightly thicker stroke will squeeze out the font fill color
- SVG: text
<svg>
<text x="10" y="40" class="text">SVG 1000 20</text>
</svg>
body {
background-color: -sharpe54e5f;
}
.text {
fill: -sharpfff;
stroke: -sharp000;
font-size: 36px;
font-weight: bolder;
font-family: sans-serif;
stroke-width: 3px;
stroke-linejoin: round;
}the effect is the same as text-stroke, where strokes occupy the font size
question: are there any other schemes to achieve font strokes that can better achieve stroke fonts?