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

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

css ios

使用CSS创建平滑的文本边框,css,ios,Css,Ios,我正在制作一款基于iPhone的锁屏。到目前为止，我想到了什么虽然，它们在布局上看起来很相似，第一个很光滑，另一个很难看：p。我相信这与文本边框的平滑度有关。（信不信由你，字体完全一样！）我现在用的是： text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858; 但正如你所看到的，它看起来不太好。有没有办法添加某种抗锯齿下面是一个简短的演示： <html> <head> &l

我正在制作一款基于iPhone的锁屏。到目前为止，我想到了什么

虽然，它们在布局上看起来很相似，第一个很光滑，另一个很难看：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>


正文{位置：绝对；背景色：#000；字体系列：Calibri；颜色：#fff；文本阴影：-1px 0#585858，0 1px#5858，1px 0#5858，0-1px#5858；}
#时钟{位置：绝对；宽度：290px；顶部：50%；边距：-0.7em 0 0 30px；字体大小：53px；}
#日{行高：0.8；字体大小：0.9em；}
#日期{位置：绝对；页边距顶部：18px；行高：0.6；字体大小：103px；}
上午5:30
星期三
12月14日

如果不提供演示，我无法真正测试这一点，但您可以尝试以下方法：

font-smooth:always;

或

这取决于它在哪个平台上。一般的解决方案是使用

rgba（）

颜色添加半透明文本阴影。你试过了吗？你可以使用Javascript吗？JamWaffles，我试过半透明阴影，但它会使边界看起来更脆弱（而不是更平滑）。Purmou，是的，我正在使用Javascript，也用于字体。如果有帮助的话，我添加了一个简短的代码版本和完整的下载版本。谢谢roXon，很抱歉完全忘记了这一点。我将更新以前的问题。谢谢，

font-smooth:everys似乎没有效果。我还没有试过第二个，但是你知道它在iPhone上是否有效吗？（我怀疑不是）@KeyMs92我不知道它是否能解决你的问题，但它应该可以工作，因为iPhone是webkit
-webkit-font-smoothing: antialiased;