html — Сравнение скорости загрузки серверного шрифта и google-шрифта
Вопрос задан
Изменён 8 месяцев назад
Просмотрен 705 раз
На англоязычном стаке задавал вопрос о проблемах подключения шрифта через @font-face.
Один из ответов советовал, что нужно подключать гугл-шрифт — это надежный и более быстрый способ подключения шрифта.
В этом я сомневаюсь, так как мы зависим от стороннего ресурса — расстояния до него, скорости работы и доступности. Возможно, я чего-то не знаю, подскажите, пожалуйста
- html
- css
- вёрстка
- шрифты
- google-fonts
5
Для начала, стандартные плюсы и минусы CDN:
+
[СОМНИТЕЛЬНО]: Браузеры на основе Хромиума создают теперь отдельный кэш на каждый запрашивающий домен.+ Снижает нагрузку на сервер, поскольку ресурс теперь отдаётся не им, а сторонним (в данном случае гугловским) сервером.
+ Позволяет увеличить число потоков одновременной загрузки. Браузеры используют ограничение — не более 8 потоков загрузки на один домен. Но CDN принадлежит другому домену, поэтому получается 8 потоков на твой сайт и ещё по 8 на каждый чужой домен.
[СОМНИТЕЛЬНО]: Браузеры на основе Хромиума создают теперь отдельный кэш на каждый запрашивающий домен.Минусы, в основном, сводятся к зависимости от стороннего ресурса:
− Если он по какой-то причине недоступен, то у тебя на сайте шрифта не будет.
Для скриптов часто делается фоллбек.− Если CDN вдруг начнёт отдавать что-то другое, пользователи увидят результат раньше тебя. Для собственного сервера ведь ты сначала проверишь, что изменилось и только потом изменённые файлы окажутся у пользователей.
Пример такой проблемы: Как загрузить шрифт Roboto v15?.? Теперь есть два сайта, которые можно пытаться взломать. Впрочем, не думаю. что это актуально для шрифтов, да и у гугловских серверов должна быть надёжная защита.
Хотя, от этого в некоторой мере помогает перманентное кэширование — клиенты, у которых файл уже есть в кэше, на сервер за ним даже не пойдут.− Если свой сервер находится в локальной/корпоративной сети, то скорость доступа к нему выше, чем к CDN. Кроме того, с ним можно работать даже если интернет недоступен.
Теперь что касается именно шрифтов:
? Гуглошрифты позволяют указать набор интересующих тебя символов, что позволит сократить объём файлов шрифта. С другой стороны, чем более хитрый набор ты укажешь, тем меньше вероятность, что нужный файл уже будет в кэше браузера.
+ Скорее всего, гуглошрифты уже оптимизированы под использование на веб-сайтах.
Не могу сказать, как именно, но на 90% уверен, что если это возможно, то они об этом позаботились.
Не могу сказать, как именно, но на 90% уверен, что если это возможно, то они об этом позаботились.6
Гугл шрифты используют многие сайты и поэтому есть вероятность того, что у пользователя в кеше уже хранится шрифт и при заходе на Ваш сайт он будет взят их кеша.
Если сохранять на своём сервере, то это лишний трафик и запросы.
Еще об одном немаловажном факте забыли упомянуть Шрифты загруженные локально содержат в себе кучу ненужного хлама разные символы и прочую ненужную хрень а это лишние запросы. Google Fonts выдает чистый шрифт только то что используется на сайте остальное отсекается это тоже плюс хоть и небольшой
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Как подключить шрифт к сайту при помощи @font-face в CSS.
Блог на facefont2018-07-20
@font-face – это CSS-правило, которое позволяет отображать шрифты на веб-страницах в интернете. До того, как появилось это правило, вебмастера могли использовать на своих сайтах ограниченный набор шрифтов, которые наиболее распространены и установлены на компьютерах пользователей. С появлением @font-face, к сайту с легкостью можно подключить любой специфический шрифт.
Если вы скачали шрифт на нашем сайте, в архиве со шрифтами вы найдете готовый CSS-код, который останется скопировать и поместить в CSS-документ подключенный к проекту.
Пошаговая установка
1. Выберите нужный шрифт и нажмите «скачать для сайта».
2. В корне своего сайта создайте папку fonts, и скопируйте в нее скачанные шрифты.
3. Откройте свой CSS-документ и скопируйте в него содержимое текстового файла из архива.
4. Убедитесь, что путь к папке со шрифтами прописан правильно. В зависимости от положения папки, в которой находятся шрифты, путь может содержать одну или несколько точек.
5. Готово. Скопируйте свойство с названием семейства и вставьте в селектор, для которого вы прописываете стили.
Что если я уже скачал шрифт в другом месте, и хочу его подключить?
В таком случае вам нужно найти в интернете конвертор шрифтов и преобразовать ваш ttf шрифт (или otf) в нужные форматы, а именно в eot, svg, woff и woff2. Это необходимо для того чтобы шрифт отображался и корректно работал во всех браузерах, а также на мобильных устройствах.
Затем вам нужно самостоятельно прописать правило @font-face, соблюдая его синтаксис.
Синтаксис @font-face
Синтаксис правила можно условно разделить на основные свойства и расширенные.
Основные:
- font-family – указывает название шрифта.
Это может быть URL шрифта, расположенного на сервере вашего сайта, URL шрифты расположенного на чужом сервере (например, Google Fonts), или просто название шрифта расположенного на компьютере пользователя (Helvetica New Bold, Tahoma, Georgia и т.д.).Расширенные:
- font-display – определяет как будет отображаться шрифт, в зависимости от того, был ли он загружен и готов ли к использованию.
- font-stretch – позволяет регулировать ширину текста.
- font-style – определяет начертание шрифта – обычное, курсивное или наклонное (последние два это не одно и то же).
- font-weight – устанавливает насыщенность шрифта, по шкале от 100 до 900 (100-сверхсветлое, 900-сверхжирное).
- font-variant — определяет как нужно представлять строчные буквы — оставить их без модификаций или делать их все прописными уменьшенного размера(капитель).
- font-feature-settings – позволяет управлять расширенными типографскими функциями в шрифтах OpenType.
- unicode-range – указывает диапазон Unicode кодов(глифов), которые будут использоваться в шрифте.
Подключение шрифта к сайту с помощью Google Fonts
Использование Google Fonts – это наиболее легкий способ подключения шрифта к сайту. Переходите на их сайт, находите нужный шрифт, выбираете нужные начертания для установки и копируете код.
Скопированный код нужно разместить в теле тега head, на вашей странице html.
Минус данного способа в том, что если во время верстки сайта у вас пропал интернет – шрифты перестанут отображаться и заменятся на стандартные т.к. файлы находятся не на локальном компьютере, а на серверах Google.
Обновлено:
2018-07-20
Автор:
Оцените статью:
3 /15 из 5
Шрифты и правительственные веб-сайты — Справочный центр ProudCity
Опубликовано 7 сентября 2018 г.
При выборе шрифтов и типографики для вашего правительственного веб-сайта важно учитывать эстетику и доступность.
Термины
Есть три ключевых термина, которые вы должны знать, чтобы лучше понять шрифтовую среду:
- Шрифты: Стиль шрифта, используемый для отображения текста, чисел, символов, глифов (например: Lato, Merriweather)
- Семейство шрифтов: шрифты, классифицированные по определенным характеристикам (например: без засечек, с засечками, рукописный, курсивный, акцидентный, фантастический, моноширинный)
- Типографика: внешний вид/расположение текста (например, шрифт, размер, выравнивание, межстрочный интервал, межбуквенный интервал, кернинг)
Проблемы
При выборе шрифтов необходимо учитывать три ключевых момента:
- Читаемость: насколько легко/сложно читать ряд слов в определенном шрифте
- Цветовой контраст: Цветовое различие между текстом переднего плана и фона
- Размер шрифта: Размер шрифта.
Рекомендации
Удобочитаемость
При рассмотрении вопроса об удобочитаемости используйте менее замысловатые и богато украшенные шрифты с отчетливым украшением букв (например, букву «L» в нижнем регистре можно спутать с буквой «I» в верхнем регистре или «8»). с прописной буквой «B»), поэтому мы рекомендуем семейства шрифтов без засечек и с засечками.
Рекомендуемые шрифты без засечек:
- Lato
- Монтсеррат
- Общественный Санс
- Робото
- Источник Санс Про
Рекомендуемые шрифты с засечками:
- Merriweather
Сочетания
Сочетания заголовков и шрифтов по умолчанию, которые мы рекомендуем для веб-сайтов на платформе ProudCity:
- Lato
- Мерриуэзер
- Робото
- Источник Санс Про
- Мерриуэзер
- Лато
- Монтсеррат
- Робото
- Источник Санс Про
- Монтсеррат
- Лато
- Робото
- Общественный Санс
- Общественный Санс
- Робото
- Лато
- Монтсеррат
- Исходный без профи
- Лато
- Мерриуэзер
- Монтсеррат
- Робото
Цветовой контраст
При выборе цвета текста обязательно учитывайте доступность, так как людям с нарушениями зрения может быть трудно читать определенные цвета.
Всегда используйте средство проверки цветового контраста WebAIM, чтобы убедиться, что цвета текста соответствуют требованиям доступности.
Как сообщает WebAIM:
Текст намного легче читать, когда между текстом и фоном есть достаточный контраст.
И система веб-дизайна США:
WCAG (Руководство по обеспечению доступности веб-контента) обеспечивает доступность контента для всех, независимо от инвалидности или пользовательского устройства. Чтобы соответствовать этим стандартам, текстовые и интерактивные элементы должны иметь коэффициент цветовой контрастности не менее 4,5:1. Это гарантирует, что зрители, которые не могут видеть полный цветовой спектр, смогут прочитать текст.
Размер шрифта
Размер шрифта сегодня не так важен, поскольку браузеры и вспомогательные технологии все чаще имеют настройки, позволяющие пользователям настраивать веб-сайты в соответствии со своими индивидуальными потребностями.
Однако, как заявляет WebAIM, «важно, чтобы ваш дизайн соответствовал увеличенному размеру текста без потери удобочитаемости или функциональности».
ProudCity и шрифты
Шрифтом по умолчанию для веб-сайтов на платформе ProudCity является Lato. ProudCity интегрируется с Google Fonts, который предлагает сотни бесплатных шрифтов, которые можно легко добавить на ваш правительственный веб-сайт.
Наша тема, ориентированная на правительство, учитывает цветовой контраст текста, а ProudCity Accessibility Checker позволяет правительствам запускать отчеты и обеспечивать их соответствие.
На каждую веб-страницу мы также включаем инструмент изменения размера шрифта, который позволяет пользователям увеличивать или уменьшать размер шрифта.
Советы
- Используйте шрифты без засечек (предпочтительно) или семейства шрифтов с засечками
- Ограничение количества используемых типов шрифтов до одного или двух
- Используйте курсив и полужирный шрифт экономно
- Не используйте заглавные или анимированный (мигающий, движущийся) текст
- Используйте средство проверки цветового контраста WebAIM, чтобы проверить доступность ваших цветов
Родственные
- Шрифты (WebAIM)
- Типография (система веб-дизайна США)
- Доступность текста (Система веб-дизайна США)
- Контрастность (минимум) (Руководство по доступности веб-контента)
- Средство проверки цветового контраста (WebAIM)
- Шрифты Google
ПраудСити
ProudCity — это цифровая правительственная платформа, которая позволяет легко и экономично запускать и управлять всеми аспектами цифровых государственных услуг, включая веб-сайты, встречи, онлайн-формы и платежи.
Подпишитесь на нашу рассылку или свяжитесь с нами в Twitter, LinkedIn, Facebook и других местах.
Следует ли использовать фирменные шрифты в дизайне веб-сайтов?
5 минут чтения
Да, конечно, но только если они доступны. Многие из наиболее распространенных сегодня шрифтов были разработаны в прошлом веке для использования в печати, но некоторые шрифты гораздо легче читать в больших абзацах текста, некоторые больше подходят для заголовков и заголовков, а некоторые больше подходят для цифровой печати, чем для печати, и наоборот.
Фото предоставлено Designerinsights.comШрифты для руководств по бренду
Послы брендов в течение многих лет указывали Arial, Helvetica, Verdana и Georgia в руководствах для использования в основном тексте, но на самом деле это могут быть не самые подходящие шрифты для всех целей. Мы часто используем рекомендации, которые были разработаны много лет назад дизайнерами полиграфии в надежде представить один и тот же бренд во всех каналах без фундаментальных цифровых знаний, которые должны учитывать производительность, доступность и практичность.
Типографически веб всегда был довольно скучным, и дизайнерам приходилось спрашивать разработчиков, какие шрифты можно использовать, в частности, какие шрифты доступны в пользовательских системах.
Веб-безопасные шрифты
Это фраза, которая часто используется неправильно и относится к древней системе. На заре Интернета было важно выбрать шрифт, который уже был установлен по умолчанию на машине, просматривающей сайт. Таким образом, ранее веб-безопасные шрифты относились к набору шрифтов, которые были сознательно установлены в большинстве систем Windows и Mac, в том числе:
- Arial — разработанный в 1982 году, ставший стандартом де-факто и являющийся одним из наиболее широко используемых шрифтов без засечек, которые до сих пор используются в Интернете и офлайн.
- Helvetica — популярный среди дизайнеров шрифт без засечек, разработанный в 1957 году швейцарским дизайнером шрифтов Максом Мидингером.
- Times New Roman — шрифт с засечками, разработанный для удобочитаемости основного текста, созданный по заказу The Times в 1931 году.
- Курьер — это моноширинный шрифт с засечками, напоминающий вывод на пишущей машинке и первоначально разработанный Говардом «Бад» Кеттлером в 1955 году.
- Verdana — известен своими простыми линиями без засечек и очень большим размером. Буквы почти вытянутые, что облегчает чтение. Он был выпущен Microsoft примерно в 1996 году.
- Georgia — еще один шрифт Microsoft, разработанный в 1993 году и выпущенный в 1996 году.
- Палатино — восходит к эпохе Возрождения, разработан Германом Цапфом и выпущен в 1949 году.
- Garamond — текущая версия была выпущена в 1990 году, однако первые римские шрифты, разработанные Клодом Гарамоном, были набором, созданным для Роберта Этьена и впервые использованным им около 1530 года.
- Bookman — сохраняет удобочитаемость (или читабельность) даже при использовании небольшого размера и был создан Александром Фемистером около 1858 года.
- Trebuchet — средневековый шрифт, изначально разработанный Microsoft в 1994.
К счастью для веб-дизайнеров и пользователей, онлайн-типографика — это область постоянного улучшения с множеством вариантов использования настраиваемых шрифтов в Интернете.
История пользовательских шрифтов
На протяжении многих лет было приложено много усилий для улучшения типографики в Интернете, вот некоторые из них, которые внесли значительный вклад в то, чтобы сделать возможным использование нестандартных шрифтов в дизайне веб-сайтов.
- Flash позволил использовать пользовательские шрифты на веб-сайтах с момента его выпуска в 1996 году, но не был удобным или доступным решением для поисковых систем, и его снижение началось примерно в 2010 году, когда Apple прекратила поставки продуктов с установленным и отключенным. поддержка на устройствах iOS.
- sIFR (или Масштабируемая замена Inman Flash) был выпущен в 2005 году и позволил вставлять богатую типографику на веб-страницы без ущерба для доступности, удобства для поисковых систем или семантики разметки. Это была реализация динамических веб-шрифтов JavaScript и Adobe Flash с открытым исходным кодом, позволяющая заменять текстовые элементы на веб-страницах HTML эквивалентами Flash.
- FLIR (или замена изображения подтяжки лица) похож на sIFR, но вместо использования флэш-памяти он встраивает простые изображения, которые автоматически генерируются из текста на веб-странице. FLIR был еще менее доступен, чем sIFR.
- Cufón был методом замены шрифтов, который использовал JavaScript и векторную графику для записи шрифтов из файла шрифта. Это был распространенный, но очень плохой метод загрузки ресурсов пользовательских шрифтов в веб-среду. Первоначально выпущенный в 2008 году, он был снят с производства в 2017 году.
- Typotheque была первой компанией, представившей концепцию веб-шрифтов в октябре 2009 года.
- Компания Fontdeck была основана в 2009 г. и предоставляла индивидуальные шрифты для веб-сайтов, но закрылась в декабре 2016 г.
поддержка на устройствах iOS.
Пользовательские решения для шрифтов
Сегодня у нас есть сотни новых шрифтов, доступных для использования в Интернете, которые одновременно легко доступны и удобны для поисковых систем. Есть еще некоторые незначительные технические и производительные соображения, и у нас нет 100% совместимости со всеми устройствами и браузерами, но сегодня мы можем иметь действительно богатый онлайн-типографический опыт, который стал возможен благодаря двум основным игрокам:
- Abobe Fonts (ранее Typekit) — это онлайн-сервис, предлагающий библиотеку шрифтов по подписке, которую можно использовать непосредственно на веб-сайтах или синхронизировать через Adobe Creative Cloud с вашими приложениями. Typekit был запущен в ноябре 2009 г. и приобретен Adobe в октябре 2011 г., а в октябре 2018 г. сменил название на Adobe Fonts.
- Google Fonts (ранее называвшийся Google Web Fonts), выпущенный в 2010 году, теперь имеет библиотеку из 900 лицензированных шрифтов libre, интерактивный веб-каталог для просмотра библиотеки и API для удобного использования шрифтов в дизайне наших веб-сайтов.
Typekit был запущен в ноябре 2009 г. и приобретен Adobe в октябре 2011 г., а в октябре 2018 г. сменил название на Adobe Fonts.Веб-шрифты и мобильные шрифты
Удобочитаемость, удобочитаемость и доступность — все это важные аспекты современной веб- и мобильной типографики, что привело к выпуску специальных веб-шрифтов и шрифтов, оптимизированных для экранов.
- Open Sans — это шрифт без засечек, разработанный Стивом Маттесоном по заказу Google в 2010 году. печатные, веб- и мобильные интерфейсы.
- Source Sans Pro — это первое семейство шрифтов Adobe с открытым исходным кодом, разработанное Полом Д. Хантом в 2012 году. Это шрифт без засечек, предназначенный для использования в пользовательских интерфейсах.
