-1
Я делаю iPhone lockscreen на основе this image. До сих пор, что я придумал 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>
Это зависит на какой платформе оно работает. Общее решение состоит в том, чтобы добавить полупрозрачную текстовую тень с цветом 'rgba()'. Вы пробовали это? – Bojangles
У вас есть доступ к Javascript? – Purag
JamWaffles, я пробовал полупрозрачную тень, но TBH делает границу более хлипкой (и не более гладкой). Пурмоу, да, я использую Javascript, а также для шрифта. Если это помогает, я добавил короткую версию кода и полную версию для загрузки. – Daan