Рендеринг шрифтов для веб-страниц

StackOverflow https://stackoverflow.com/questions/33881

  •  09-06-2019
  •  | 
  •  

Вопрос

Я всегда сталкиваюсь с одной и той же проблемой при создании веб-страниц. Когда я добавляю шрифт больше 16-18px, это выглядит ужасно. Его неровный и неровный. Я пробовал использовать разные шрифты и веса, но мне не очень повезло.

Примечание: это только в окнах, что это так. В основном в Opera и FF также в IE7, но не так плохо. В Linux шрифт выглядит хорошо. Я не смотрел на Mac.

Что вы, ребята, делаете, чтобы это исправить? если что-нибудь. Я заметил, что названия здесь на SO также довольно зазубренные, но они достаточно малы, чтобы не выглядеть плохо.

Это было полезно?

Решение

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

Если вы делаете это, убедитесь, что вы предоставляете альтернативное текстовое представление для тех, кто не видит изображения. Я склонен использовать CSS, чтобы показать фоновое изображение и скрыть содержимое заголовка. Вот так. 

<style>
    h1
    {
        height: 32px;
        width: 100px;
        background: url("path/to/image")
    }

    h1 span
    {
        display: none;
    }
</style>

<h1>
    <span>
       Heading Text
    <span>
</h1>

Если честно, это кажется излишним, если это касается всего большого текста. И имейте в виду, что это увеличит объем данных, которые должны загружать ваши клиенты. Однако для большого заголовка этот метод может привести к чему-то, что выглядит лучше, чем текст, представленный операционной системой.

Другие советы

Включение сглаживания должно решить проблему с отображением.

Помимо сглаживания, попробуйте включить clear type.

В Windows включение ClearType решит эту проблему. Тем не менее, вы не можете заставить пользователей использовать его. Это не проблема браузера; это метод сглаживания шрифтов операционной системы.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top