Парочка неочевидных граблей при использовании веб-шрифтов

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

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

    КДПВ, она же грабли #1



    Как оказалось, выбранный шрифт выглядел, мягко говоря, очень плохо, если на компьютере выключено сглаживание неровностей экранных шрифтов.

    В windows, к примеру, за такое отвечает вот эта галочка:



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

    Для того чтобы это сделать помощью js, определяем, включено ли в системе сглаживание шрифтов, и если нет, то навешиваем на body спец. класс и переопределяем стили.

    Само определение и его объяснение есть к примеру у Zoltan Hawryluk.

    Идея там весьма несложная — рисуем текст на canvas и проверяем потом, есть ли там символы с полупрозрачностью. Кстати, эту проверку предлагали добавить в Modernizr, но реквест отклонили.

    Грабли номер 2 выглядят к примеру так:



    А иногда несколько иначе: еще были варианты не жирного, но какого-то растянутого шрифта и просто слегка другого.

    Во всех случаях причина была одна — установленный локально шрифт.

    Изначально мы подключили шрифты с помощью css напрямую с google fonts

    <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    

    И там примерно такой css:

    @font-face {
      font-family: 'Exo 2';
      font-style: normal;
      font-weight: 400;
      src: local('Exo 2'), local('Exo2-Regular'), url(https://fonts.gstatic.com/s/exo2/v4/7cHmv4okm5zmbtYoK-4.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    

    Решение — забираем css к себе и убираем из него local:

    @font-face {
      font-family: 'Exo 2';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/exo2/v4/7cHmv4okm5zmbtYoK-4.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    

    После этих несложных изменений все пользователи стали счастливы.

    (кроме тех кому не понравился новый шрифт — но это уже не технический вопрос и пусть холивар какие шрифты лучше и красивее остается за рамками этой статьи)

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 22

      0
      После этих несложных изменений все пользователи стали счастливы.

      Уверены что все?

        0
        Как часто бывает нестандартная конфигурация системы?
          0
          Отключенное сглаживание оказалось часто. Проценты не считали, но жалоб было много — судя по всему это весьма распространенная штука на рабочих компьютерах
            0

            Знаю несколькo человек, которые специально отключают сглаживание шрифтов.
            В принципе, на экранах высокой чёткости сглаживание уже и не нужно.

            +2
            Например, для RDP по умолчанию отключен.
              0
              Когда пользователь Windows ищет дополнительного быстродействия в доступных настройках. Думаю, это нередкий кейс. Шаги для воспроизведения (скриншот): c2n.me/3StHRPH
                0
                Уже дважды сглаживание выключалось само после какихто-там обновлений Windows 10…
                0

                Спасибо за статью, меня шрифты на телефоне полностью устраивают, поэтому добавил fonts.gstatic.com 0.0.0.0 в настройки DNS.

                  –1

                  Да, у меня при любых настройках ClearType и прочих Font Anti-aliasing большинство шрифтов так или иначе начинает резать глаз — или расплываются на красно-зелёный, или покрываются размытыми серыми каплями… Лет десять как. Поэтому я очень люблю и уважаю растровые шрифты, типа MS Core Fonts и выключенные эффекты сглаживания.
                  Особенно тяжело бы мне давалось разглядывание кода, где нужно постоянно обращать внимание на мелочи — O0,.
                  Мой путь — к чёрту смыливание, к чёрту Хром, который никогда не умел и никогда не сумеет работать в растре нормально, к чёрту смазанные шрифты. Tahoma в системе, Verdana в вебе, LucidaConsole/PTMono/ProggySZ в коде! Calibri/Consolas выжигаю как могу. А поскольку вебщики не идут навстречу, режу шрифты сам в Firefox.

                    0

                    Вам просто нужен дисплей с повышенной плотностью пикселя, типа Retina.

                      0

                      Просто — это сколько в рублях нынче за 24" хотя бы?

                        0
                        Поищите, я в другой стране, в ваших ценах и точках поиска не разбираюсь.

                        За себя только могу сказать, что если бы я был человеком со специфическим восприятием сглаженных шрифтов, а такие люди есть, то я бы обязательно поставил себе цель перейти на ретиноподобный дисплей, на котором сглаживание не нужно, а выглядит всё так как задумывали авторы сайтов и различных приложений.
                    0

                    Недавно, пару лет назад, вконтакт перешел на абсолютно блевотный шрифт. Теперь большинство сайтов ринулись вслед за ним. И только на хабре со шрифтами (пока) все в порядке...


                    Научите, что в браузере настроить, чтобы шрифт везде был, например, как в системе? Четкий, ровный, без мыла, но со сглаживанием.

                      0
                      Отключить «Разрешить страницам использовать свои шрифты» в Firefox и убить все шрифтовые иконки. Или тщательно настраивать каждый сайт при помощи юзерстилей.
                        0
                        Мне бы про хромобраузеры.
                        Вот пример абсолютно дегенеративной рвотной работы современных «дизайнеров», видно, что шрифт в теме четкий, ровный, а в шапке новомодный, обвел желтым:

                        image
                          0
                          У вас выключено сглаживание, а у него включено и он об этом не задумывается. А что здесь такого? Это какой-то ресурс, который зарабатывает деньги на удержании на орумах как можно большего числа пользователей? Врядли.
                            0
                            а у него включено и он об этом не задумывается.

                            Вообще-то задумываюсь, и потратил весьма много времени на доводку, так как FF пару обновлений назад опять всё сломал на XP, врубив skia вместо cairo по умолчанию. Это я не сразу выяснил, пришлось перекопать кучу настроек, связанных со шрифтами.
                            0
                            Мне бы про хромобраузеры.

                            Любую проблему хрома можно решить, установив FireFox. Хром просто не имеет нужных настроек.
                            Вообще, у меня в этом FF настроено так, что основные шрифты, написанные в благодатные времена ручной привязки к пикселям, отображаются без сглаживания, а новомодное дешёвое поточное говно идёт с монохромным сглаживанием. В итоге и глаза не ест, и чаще всего основной текст выглядит отлично, вот
                            Заголовок спойлера
                            Пример грамотного сглаживания шрифтов только там, где это нужно

                            Вообще, это работа не дизайнеров (у них то всё выглядит нормально), а шрифтописателей. Раньше каждый глиф вручную подгонялся под пиксельную сетку на небольших кеглях, в результате шрифты стоили дорого и делались долго. Сейчас же шрифтодизайнеры ваяют по 100500 шрифтов на все случаи жизни, переваливая всю работу по хинтингу на автоматику, которая и выдаёт ваш результат.
                              0
                              Мне не нравится «размыливание» шрифта на синеватом фоне.
                              Я бы хотел иметь возможность в браузере принудительно все шрифты заменить на свои, как это можно было в старой опере. Сейчас ЯБ…
                                0
                                Выше я описал решения, уверен, что в вашем ЯБ есть какой-нибудь блокировщик рекламы, в которй можно прописать запрет всех расширений файлов шрифтов, но это даст свои очевидные косяки. Сейчас много где используют шрифтовые иконки, и при принудительной замене всех шрифтов на свои вы получите в лучшем случае квадраты на месте иконок, а в худшем полную белиберду.
                                  0

                                  Например?
                                  Какие сайты такое используют?

                                    0
                                    До последней волны редизайнов даже хабр. А так к примеру https://twitter.com/, https://www.microsoft.com/. Сейчас идёт отказ от шрифтовых иконок, но когда крупные отказываются, мелкие только начинают внедрять, так что не удивляйтесь квадратам на каждом втором сайте из поисковика.

                      Only users with full accounts can post comments. Log in, please.