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

image

Мой браузер показывает сайт, представляемый Автором в Arial. В коде присутствует Roboto, но «сброшенный» до дефолта с засечками.

image

Несомненно, это следствие отсутствия в моей системе шрифта Roboto. Я проверил в Windows 8 и 7 — шрифтов нет, позвонил приятелю-маководу — у него аналогичная ситуация.

image

Допуская, что я ошибаюсь и специалисты Автора применили «волшебный» @font-face, а также учитывая то, что шрифты Arial и Roboto несколько похожи, я сделал легкое сравнение.

Почти невооруженным взглядом различия наиболее заметны в написании букв «д» и «ы». В Arial «д» широкая, а у «ы» обе части знака расположены близко. В Roboto у «д» ширина явно проигрывает, а «палка» у «ы» отстоит дальше вправо.

image

P.S. Я сильно не претендую на публикацию всего сказанного мной выше, просто прошу модераторов как-нибудь сообщить Автору обо всем этом, т.к. в английской «бургерной» версии мои сомнения, написанные на русском языке, были удалены минут через десять, а вопрос «Why...?», переведенный с помощью google-переводчика до сих пор висит без ответа.

image

P.P.S. Прочность системы определяется прочностью самого слабого ее элемента.

Комментарии (8)


  1. maaGames
    31.07.2015 15:34
    +8

    Буква 'е' ещё сильнее в этих шрифтах различается.

    А вообще, вы просто не поняли фичу! Вот написал автор про бездумное использование шрифтов и сразу же его продемонстрировал, чтобы было понятнее. Молодец автор.


    1. apstim Автор
      31.07.2015 15:44
      +3

      причем достаточно масштабно


  1. damat
    31.07.2015 19:43
    +1

    Специально проверил, на Гороскопах все работает: bitly.com/1gtRx5a

    Вот css, который подключает кастомный font-face в common.deg.css прямо в первой строке:

    @font-face {
    font-family: 'Roboto';
    src: url("/bem-toolkit/blocks-desktop/common/__fonts/_fonts/roboto_300.eot?v20150616");
    src: local('Roboto Light'), local('Roboto-Light'), url("/bem-toolkit/blocks-desktop/common/__fonts/_fonts/roboto_300.eot?v20150616#iefix") format('embedded-opentype'), url("/bem-toolkit/blocks-desktop/common/__fonts/_fonts/roboto_300.woff?v20150616") format('woff'), url("/bem-toolkit/blocks-desktop/common/__fonts/_fonts/roboto_300.ttf?v20150616") format('truetype');
    font-weight: 300;
    font-style: normal;
    }

    ЧЯДНТ?

    PS ссылки и форматирование мне недоступны из-за кармы, не гневайтесь =)


    1. apstim Автор
      31.07.2015 20:49

      я скрины не с потолка взял, может поправили уже, ибо косяк такой косяк


      1. damat
        31.07.2015 21:31

        а сейчас у вас как? так же с багами?


        1. apstim Автор
          31.07.2015 22:28

          image

          теперь, судя по буквам «д», все нормально, значит исправились оперативно.
          Наверху word с Arial, внизу сайт Автора с Roboto


  1. jvetrau
    03.08.2015 19:07

    Roboto — нестандартный шрифт, который подгружается отдельно. В случае, если по какой-то причине произошел сбой — показывается Arial, готорый гарантированно есть в любой более-менее массовой ОС. У вас как раз шрифт не догрузился, но почему и как он мог замениться на шрифт с засечками — вообще непонятно. Возможно, проблема была на вашей стороне, потому что мы со шрифтом ничего не делали. Хотя судя по скриншотам, у вас Windows 8 и с ним проблем не должно быть вообще.

    P.S. Что касается комментариев на Smashing Magazine, то их модерирует команда сайта, я его даже не увидел.


    1. apstim Автор
      03.08.2015 19:14
      +1

      да, спасибо, все работает, а это самое главное