使用CSS創建流暢的文本邊框

-1

我正在根據this image製作iPhone鎖屏。到目前爲止，我已經想出了looks like this。使用CSS創建流暢的文本邊框

雖然他們在佈局上看起來非常相似，但第一個是光滑的，而其他的則很醜陋：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>

來源

2011-12-13 Daan

這取決於它在哪個平臺上。一個通用的解決方案是添加一個帶有'rgba（）`顏色的半透明文本陰影。你嘗試過嗎？ – Bojangles 2011-12-14 00:00:36

您有權訪問Javascript嗎？ – Purag 2011-12-14 00:01:11

隨着出提供一個演示中，我真的不能測試，但你可以嘗試這樣的：

font-smooth:always;

或

-webkit-font-smoothing: antialiased;

來源

2011-12-14 00:01:39 Petah

使用CSS創建流暢的文本邊框

回答

相關問題