Шрифты становятся размытыми, если их размер меньше 11 пикселей

Question

Я конвертирую изображение Photoshop в HTML, и я заметил, что когда я устанавливаю размер шрифта в 11px, он становится размытым, но в Photoshop он все еще выглядит хорошо.

Итак, после игры я обнаружил, что если я установлю опцию типа шрифта в smooth вместо nonePhotoshop также делает шрифт размытым.

Итак, как я могу сделать шрифт более четким, используя CSS, чтобы он отражал рендеринг шрифтов в Photoshop? Я использую Arial как мой шрифт. Вот мой CSS прямо сейчас:

.user_status {
    color: #666666;
    font: Arial;
    font-size: 11px;
    display: block;
    margin-top: 10px;
}

Спасибо всем за отличные ответы, это мне очень помогло, хотелось бы выбрать более 1 ответа как правильный...

Answer 1

Большинство браузеров используют системные библиотеки рендеринга шрифтов, поэтому большинство шрифтов будут немного отличаться в разных операционных системах. Однако вы можете попробовать использовать 2 свойства css3, перечисленные ниже:

-webkit-font-smoothing: [авто | начальный | нет | сглаженный | субпиксельный сглаженный]

Это свойство работает только с браузерами webkit, такими как Safari и Chrome. Смотрите http://maxvoltar.com/archive/-webkit-font-smoothing чтобы узнать больше об этом.

font-smooth: [авто | никогда | всегда | <абсолютный размер> | <длина>]

Это часть спецификации модуля W3C CSS Font. Вы можете просмотреть все это на http://www.w3.org/TR/WD-font/. Я не уверен, поддерживает ли это свойство какой-либо браузер. YMMV.

Answer 2

К сожалению, вы ничего не можете сделать. У браузеров нет расширенных сглаживающих настроек, которые есть в Photoshop, где вы можете установить режим сглаживания шрифта на резкий, сглаженный или четкий (что мне нравится). Вам придется увеличить или уменьшить шрифт, и в основном от браузера зависит, как будет отображаться текст.

Answer 3

В webkit вы можете установить:

  -webkit-font-smoothing: none;

Это приблизительно соответствует вашему сглаживанию в Photoshop: нет.

Посмотреть демо здесь: http://jsfiddle.net/jv5W8/

Answer 4

К сожалению, вы обычно не имеете никакого контроля над тем, как шрифты отображаются браузером. Новое свойство CSS3, font-smooth, может позволить себе некоторый контроль, но не тот, который вы ищете.

Некоторыми альтернативами может быть использование JavaScript и изображений, отображаемых вручную или на стороне сервера, для достижения желаемого эффекта. Вы также можете использовать sIFR (замену встроенного Flash-сценария ¹) для замены небольшого фрагмента ролика Flash, который позволяет вам сглаживать шрифт, как вам угодно, но Flash вряд ли повсеместен, и это не очень эффективное и элегантное решение.,

Итак, если вам абсолютно необходима эта функциональность, я бы предложил сделать прозрачные PNG-файлы с помощью Photoshop и использовать background-image а также text-indent: -9999px заменить текст с изображением.

Еще один момент, о котором вы можете подумать: стоит ли вам использовать шрифт размером 11px? Это довольно сложно увидеть, и вы можете предпочесть просто выбрать больший размер шрифта.

_{¹ Я могу ошибаться в этом аббревиатуре.}