Question

我正在制作基于this image的 iPhone 锁屏。到目前为止，我提出了looks like this。

尽管如此，它们在布局上看起来非常相似，第一个是光滑的，而另一个则相当丑陋：P。我认为这与文本边界的平滑性有关。（信不信由你，字体完全相同！）我现在正在使用它：

text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858;

但是你可以看到它看起来并不好看。有没有办法添加某种抗锯齿？

这是一个简短的演示：

<html>
<head>
<style type="text/css">
body { position: absolute; background-color: #000; font-family: Calibri; color: #fff; text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858; }
#clock { position: absolute; width: 290px; top: 50%; margin: -0.7em 0 0 30px; font-size: 53px; }
#day { line-height: 0.8; font-size: 0.9em; }
#date { position: absolute; margin-top: 18px; line-height: 0.6; font-size: 103px; }
</style>
</head>   
<body>
<img src="http://tiny.cc/47nz6" width="320" height="480">
<div id="clock">5:30 AM
    <div id="day">Wednesday
    </div>
    <div id="date">14 Dec
    </div>
</div>
</body>
</html>

Answer 1

如果没有提供演示，我真的不能尝试这个，但你可以尝试类似的东西：

font-smooth:always;

或

-webkit-font-smoothing: antialiased;

使用CSS创建平滑的文本边框

1 个答案: