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

Question

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

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

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

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

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

Answer 1

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

-webkit-font-smoothing: [auto |начальный |нет |сглаженный |subpixel-antialiased]

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

font-smooth: [auto |никогда |всегда ||]

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

Answer 2

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

Answer 3

В веб-наборе вы можете установить:

  -webkit-font-smoothing: none;

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

См. Демонстрацию здесь: http://jsfiddle.net/jv5W8/

Answer 4

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

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

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

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

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