问题
I am trying to achieve a jagged text effect with HTML and CSS text. I am aware of the webkit-font-smoothing and font-smooth properties, but even with those set to "none" and "never", the text is still smoother than I would like.
Are there other css properties, or other methods I can use to force the text to be more jagged / aliased? Only caveat is it needs to be actual HTML text, not images.
回答1:
A lot of text-shadow
can approximate such effect. The more you add the more you get the bad effect:
.box {
font-size:180px;
display:inline-block;
font-weight:bold;
text-shadow:
0 0 0px,
0 0 0px,
0 0 0px,
0 0 0px,
0 0 0px,
0 0 0px,
0 0 0px,
0 0 0px,
0 0 0px,
0 0 0px,
0 0 0px,
0 0 0px;
}
<div class="box">a b</div>
<div class="box" style="text-shadow:none;">a b</div>
回答2:
You can remove all the transparency created by antialiasing with SVG filters:
.box {
font-size:180px;
display:inline-block;
font-weight:bold;
filter: url(#remove-alpha);
}
.small .box {
font-size:20px;
font-weight:normal;
}
<svg width="0" height="0" style="position:absolute;z-index:-1;">
<defs>
<filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 1"></feFuncA>
</feComponentTransfer>
</filter>
</defs>
</svg>
<div class="box">a b</div>
<div class="box" style="filter:none;">a b</div>
<div class="small">
<div class="box">a b</div>
<div class="box" style="filter:none;">a b</div>
<div>
But note that on high-res monitors this won't have much visible effects on big texts. You should rather go with a web-font that has been designed this way from the beginning.
来源:https://stackoverflow.com/questions/65191293/how-to-get-an-aliased-retro-style-html-text-effect