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

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

http://www.fontsquirrel.com и http://www.google.com/fonts/

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

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

http://twitter.github.io/bootstrap/ — сам фреймворк

http://benstewart.net/2012/06/bootstrap-responsive-photoshop-templates/ - шаблон psd (это был быстрый поиск, возможно, есть лучшие).

Если вы сможете заставить их проектировать с помощью сетки, вы, возможно, сможете добиться гораздо более близких результатов к их проектам.

Когда я сталкиваюсь с дизайнерами полиграфии, которые отказываются понимать среду, я обычно сажусь и объясняю разницу:

В PhotoShop = вы, дизайнер, можете диктовать дизайн.

В HTML/CSS = вы, дизайнер, можете просто предложить, что это может быть.

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

Помимо этого, в целом, что следует учитывать при выборе шрифта в Интернете:

• для основного текста шрифт с большой высотой x может облегчить чтение
• избегайте установки типа меньше 11 пикселей (
• сглаживание шрифтов диктуется браузером и ОС. Это будет варьироваться от машины к машине, от браузера к браузеру.
• Веб-шрифты могут быть отличными, но из-за проблем со сглаживанием шрифтов в некоторых ситуациях вы можете захотеть уменьшить их использование для отображения лиц (заголовков).

В прошлом популярные системные стандартные шрифты назывались « веб-безопасными » шрифтами. Многие веб-дизайнеры считают хорошей практикой придерживаться их. Почему ты справшиваешь? В первые дни существования Интернета не было стандартного шрифта, который можно было бы использовать на всех платформах. Однако были шрифты, которые, скорее всего, были компьютерными, например Arial, Helvetica и Times New Roman.

Но в наши дни все немного по-другому. В современных браузерах теперь безопасно использовать « веб-шрифты » — метод, использующий удаленный файл шрифта для отображения определенного шрифта на веб-странице с помощью @font-face , что дает больше творческой свободы и гибкости при разработке веб-страницы. Это ни в коем случае не новая концепция, по крайней мере, частичная ее поддержка существовала, по крайней мере, до IE 5.5.

@font-face был официально включен в самую последнюю версию стандартов CSS W3C (CSS3, он был взят из CSS2.1). Google Fonts API предлагает быстрый и простой способ моментально сделать шрифты в их библиотеке пригодными для использования путем создания необходимого кода после выбора понравившегося шрифта.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body { font-family: 'Open Sans'; }

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

body {font-family: "Open Sans", "Arial", "Helvetica", sans-serif; }

Стек шрифтов CSS должен включать аналогичные веб-безопасные шрифты, причем последним объявлением в стеке должно быть общее семейство шрифтов («serif» или «san-serif»). Что происходит, если ваш браузер не может найти один шрифт, он ищет следующий в строке.

Но почему это важно? В конце концов, использование веб-безопасных шрифтов и стеков шрифтов CSS кажется устаревшим, особенно с учетом того, что @font-face имеет отличную поддержку во всех современных браузерах.

Есть несколько причин... одна из них - полнота этих шрифтов. Некоторые символы в выбранном вами шрифте могут быть недоступны (в этом шрифте отсутствует символ ™). Когда это произойдет, браузер попытается отобразить недоступные символы, используя следующий шрифт в вашем стеке шрифтов CSS. Если у вас нет такого стека шрифтов, браузер использует ваш стандартный шрифт по умолчанию (вы можете установить это в настройках вашего браузера). Почему это всегда может быть проблемой? Допустим, у вас есть заголовок с засечками (например, Times New Roman) в вышеупомянутом шрифте, а шрифт по умолчанию в вашем браузере — шрифт без засечек (например, Arial). Несоответствие между двумя разными стилями может не обязательно выглядеть хорошо. У вас нет контроля над тем, какой шрифт должен быть в браузере по умолчанию, и вы не должны пытаться это сделать.

Другой причиной может быть сам интернет. Иногда у людей отключается интернет, а значит, и услуги в Интернете. Эти шрифты, которые у вас есть, размещены в Интернете. Если служба, на которой он размещен, не работает, даже если это лучший шрифт в мире, он никогда не загрузится, вместо этого он будет использовать стандарт вашего браузера по умолчанию, если только вы не укажете веб-безопасный шрифт в своем стеке шрифтов CSS. Веб-сайт может выглядеть совершенно по-другому, если вдруг ваш предполагаемый файл шрифта недоступен из-за какого-либо перерыва в обслуживании.

Вы можете отключить загрузку веб-шрифтов на стороне клиента через браузер. Но зачем тебе вообще это делать? Это одна из самых недооцененных причин производительности. Это более желательно для пользователей, у которых медленное интернет-соединение по той или иной причине. В большинстве случаев способ сделать это в браузере несколько запутан. Загрузка шрифта из Google Font API может занять еще 1,2 секунды, тогда как обычно страница загружается за 0,011 секунды. Хотя мы воспринимаем скорость как должное, поскольку быстрый широкополосный доступ легко доступен в большинстве развитых стран, важно обеспечить, чтобы на видимость и согласованность типографики вашего сайта не влияли ограничения пользователя (параметр доступности) или его платформы (пропускная способность, браузер).

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

если я правильно понял, вам нужны наиболее эффективные методы рендеринга шрифта в Интернете. в этом случае, как уже упоминалось, перейдите на fontsquirrel и используйте их генератор синтаксиса/формата @font-face, он напишет для вас объявление @font-face, хотя я редактирую свой, но что более важно, он создает копии нужного шрифта в другие форматы, ориентированные на другие браузеры/платформы, эффективно достигающие желаемого.

тем не менее: в некоторых версиях Windows и использовании DirectX все еще есть очень четкие различия. У меня также было плохое отображение шрифта в хроме на win7 некоторое время. Помимо проблем с хромом, большинство из них возникают в каждом конкретном случае. есть несколько свойств css3, которые имеют ограниченную реализацию в браузере, и обычно проблемы, которые я увижу, можно исправить, поработав с ними...

что говорит: шрифты google, typekit и т. д. имеют (некоторую) встроенную оптимизацию, специально предназначенную для случаев, о которых я упоминал выше ... я не большой поклонник ни того, ни другого, потому что первое правило сторонних зависимости заключается в том, чтобы избежать сторонних зависимостей. ;)
конечно это не реально, но я их обрезаю по мере возможности. Мне также нравится, что мой собственный запуск не зависит от javascript, а также делает дополнительные HTTP-запросы и, наконец, позволяет мне вручную выбирать через объявление @font-face, редактируя/обрезая, где я считаю нужным.

1. Вы должны объяснить им, что когда дело доходит до веб-сайтов, вы не можете достичь 100% согласованности по всем миллионам переменных, вы можете только предпринять любые шаги, которые в ваших силах, чтобы достичь максимально возможной согласованности. То, как DA01 излагает это в своем ответе, — это очень лаконичный и простой способ донести сообщение.

2. Затем я бы посоветовал им сначала выбрать стиль шрифта, а не конкретный шрифт.

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

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

Есть еще один недавний вопрос, который может быть полезен для вас:

Допустимо ли использовать разные, но похожие шрифты для печатного и веб-контента?