不用font-weight，利用svg滤镜feMorphology实现文字变粗变细
近日，在公司处理大屏样式，字体是HarmonyOS_Sans_TC_Thin，在字体加载完成后，使用发现并没有生效。 即使使用了font-weight，依然没作用。齐巧，浏览web发现了利用svg的滤镜可以实现文字的变粗变细。看了下来 倒是一剂解决方法。不过，说实话效果一般。需要慢慢调整radius的值。不然变细时，会把字腐蚀的看不见。
演示示例
正常
我是正常苗条
我是苗条体胖
我是体胖示例代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用svg滤镜feMorphology实现文字变粗变细</title>
<style>
data {
font-size: 40px;
font-family: system-ui;
}
.erode {
filter: url(#erode);
}
.dilate {
filter: url(#dilate);
}
</style>
</head>
<body>
<h4>正常</h4>
<data class="normal">我是正常</data>
<h4>苗条</h4>
<data class="erode">我是苗条</data>
<h4>体胖</h4>
<data class="dilate">我是体胖</data>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<filter id="erode">
<feMorphology operator="erode" radius="1" />
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="1" />
</filter>
</svg>
</body>
</html>参考链接
https://www.zhangxinxu.com/wordpress/2024/05/svg-femorphology-font-weight-thin-stretch/