Googlefonts

Кэширование в браузере

Еще одна встроенная оптимизация Google Fonts — кеширование в браузере.

Из-за вездесущей природы Google Fonts браузеру не всегда нужно загружать полные файлы шрифтов. Например, сайт SmashingMagazine использует шрифт «Mija», если ваш браузер впервые видит этот шрифт, ему нужно будет полностью загрузить его до отображения текста, но при следующем посещении веб-сайта, использующего этот шрифт, браузер возьмет уже кэшированную версию.

Срок действия кэша браузера Google Fonts истекает через год, если он не будет очищен раньше.

Примечание: Mija не является шрифтом Google, но принципы кэширования не зависят от поставщика.

CSS Эффекты для шрифтов

В Google Fonts есть встроенная поддержка CSS Эффектов для шрифтов, что может пригодиться для красивого выделения заголовков или других семантических частей текста. Для этого используется параметр

Подключаем шрифт с эффектом :

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple

Чтобы использовать эффект, добавьте соответствующее имя класса к вашему HTML-элементу. Соответствующее имя класса всегда является именем эффекта с префиксом , поэтому имя класса для эффекта будет :

This is a font effect!

Можно использовать несколько эффектов, перечислив их названия через вертикальную черту :

https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float

Список всех эффектов для нескольких шрифтов:

//fonts.googleapis.com/css?family=Tangerine|Rancho|Source+Sans+Pro:900&effect=3d|3d-float|anaglyph|brick-sign|canvas-print|crackle|decaying|destruction|distressed|distressed-wood|emboss|fire|fire-animation|fragile|grass|ice|mitosis|neon|outline|putting-green|scuffed-steel|shadow-multiple|splintered|static|stonewash|vintage|wallpaper

Список всех эффектов на живом примере (некоторые примеры могут не работать в Mozilla Firefox):

Полезная инфа:

Несколько шрифтов в одном запросе

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

https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

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

https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

Можно использовать сокращения:italic – или bold – или , или числовое значение bold italic – или

https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b

Font Squirrel @font-face Generator

Крайне удобный сервис для встраивания шрифтов и их автоматической конвертации (!) в форматы TrueType, WOFF, EOT Lite, EOT Compressed и SVG. Шикарный набор, не правда ли? Благодаря этому совместимость с разными браузерами (и разными версиями браузеров) увеличивается на 100%.

Итак, достоинства этого сервиса (их много):

  1. Возможность залить любой нужный вам шрифт. Это могут быть даже какие-то графические элементы, переведённые в вид TTF-шрифта, которые вы хотите использовать для элементов навигации в своей странице.
  2. Автоматическая безошибочная конвертация в любой формат из большинства открытых и закрытых стандартов шрифтов (исключая, наверное, .fon и другие специфические шрифты начала 90-х: TrueType, WOFF, EOT, OpenType.
  3. Множество тонких настроек.
  4. Вероятность, что ваш шрифт будет выглядеть одинаково в большинстве современных версий браузера, очень высока — всё же вы можете выставить собственные настройки. Например, использовать параметр X-Height Matching, для того, чтобы ваш шрифт по высоте был примерно схож с Times New Roman, например (пиксельхантеры не дремлют).
  5. Можете запретить использование шрифта на компьютере, используя свойство WebOnly Protection.
  6. Встроить свои шрифты прямо в CSS при помощи Base64 Encode — это уменьшит количество запросов к серверу и положительным образом скажется на снижении его нагрузки.
  7. Возможность выбора именно тех локалей, которые вам конкретно будут нужны (это позволит уменьшить размер файлов).

Недостатки:

  1. Сложность настроек. Их реально очень много, и довольно легко в них запутаться, особенно для неанглоязычного пользователя.
  2. Конечное встраивание в страницу не настолько тривиально, как в Google WebFonts.

Теперь подведём итоги:

  1. Google WebFonts: крайняя простота использования, но пока что малое количество шрифтов и некоторые проблемы в связи с тем, что шрифты хранятся на CDN Google.
  2. Font Squirrel @font-face Generator: возможность загрузить собственный шрифт, уменьшить его размер и совместимость, большое количество настроек, но в то же время, сложность их правильной настройки рядовым пользователем.

Как форматировать абзацы

Как изменить межстрочный интервал и выравнивание текста

Как изменить межстрочный интервал

  1. Откройте файл в Google Документах на компьютере.
  2. Выделите текст.
  3. Нажмите Формат Межстрочный интервал.
  4. Выберите подходящий вариант:
    • Чтобы указать нужный межстрочный интервал, нажмите Одинарный, 1,15, 1,5 или Двойной.
    • Чтобы изменить интервал между абзацами, нажмите Удалить пробел перед абзацем или Добавить пробел после абзаца.
    • Чтобы задать значения, которых нет в списке стандартных, выберите Настройка интервалов. Введите нужные интервалы и нажмите Применить.
    • Чтобы заголовок и идущий за ним абзац всегда находились на одной странице, нажмите Не отрывать от следующего.
    • Чтобы все строки абзаца всегда находились на одной странице, выберите Не разрывать абзац.
    • Чтобы предотвратить появление в документе висячих строк, нажмите Запретить висячие строки.

Как изменить границы и цвет

  1. Откройте файл в Google Документах на компьютере.
  2. Выделите абзац.
  3. Нажмите Формат Границы и линии.
  4. Задайте нужные настройки в открывшемся окне.
  5. Чтобы удалить границы или цвет, нажмите Сбросить.
  6. После изменения параметров выберите Применить.

Как форматировать шрифты

Как изменить регистр

  1. Откройте файл в Google Документах на компьютере.
  2. Выделите текст. 
  3. Нажмите на значок «Цвет текста» .
  4. Выберите нужный цвет.

Как выбрать шрифт по умолчанию

  1. Откройте файл в Google Документах на компьютере.
  2. Выделите текст.
  3. Выберите шрифт на панели в верхней части экрана.
  4. Нажмите Формат Стили абзацев Обычный текст Обновить обычный текст в соответствии с выделенным фрагментом.
  5. Убедитесь, что текст по-прежнему выделен, и нажмите Формат Стили абзацев Настройки Сохранить как стили по умолчанию.

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

Как добавить дополнительные шрифты

Для некоторых языков можно добавить в меню дополнительные шрифты.

  1. Откройте файл в Google Документах на компьютере.
  2. Нажмите на название шрифта в верхней части экрана.
  3. Выберите Другие шрифты в конце списка.
  4. Чтобы найти нужный шрифт, пролистайте список или воспользуйтесь поиском.
  5. Нажмите на шрифт, чтобы добавить его в список «Мои шрифты».
  6. Чтобы отсортировать или отфильтровать список шрифтов, используйте меню «Сортировать» и «Показать».
  7. Нажмите ОК.

Поддерживаемые языки

Шрифты доступны для следующих языков:

  • Африкаанс
  • Албанский
  • Арабский
  • Азербайджанский
  • Бенгальский
  • Бирманский
  • Каталанский
  • Хорватский
  • Чешский
  • Датский
  • Нидерландский
  • Английский
  • Эстонский
  • Филиппинский
  • Финский
  • Французский
  • Немецкий
  • Греческий
  • Гуджарати
  • Иврит
  • Хинди
  • Венгерский
  • Исландский
  • Индонезийский
  • Итальянский
  • Каннада
  • Казахский
  • Кхмерский
  • Киргизский
  • Латышский
  • Литовский
  • Македонский
  • Малайский
  • Малаялам
  • Маратхи
  • Монгольский
  • Непальский
  • Норвежский
  • Персидский
  • Польский
  • Португальский 
  • Панджаби
  • Румынский
  • Русский
  • Сербский
  • Сингальский
  • Словацкий
  • Словенский
  • Испанский
  • Суахили
  • Шведский
  • Тамильский
  • Телугу
  • Тайский
  • Турецкий
  • Украинский
  • Урду
  • Узбекский
  • Вьетнамский

Как изменить цвет шрифта

  1. Откройте файл в Google Документах на компьютере.
  2. Выделите текст. 
  3. Нажмите на значок «Цвет текста» .
  4. Выберите нужный цвет.

Как изменить цвет фона текста

  1. Откройте файл в Google Документах на компьютере.
  2. Выделите текст. 
  3. Нажмите на значок «Цвет фона текста» .
  4. Выберите нужный цвет.

Как сделать шрифт полужирным или курсивным и как зачеркнуть текст

  1. Откройте файл в Google Документах на компьютере.
  2. Выделите текст. 
  3. Чтобы отформатировать его, выполните нужное действие:
    1. нажмите на значок «Полужирный» ;
    2. нажмите на значок «Курсив» ;
    3. выберите Формат Текст Зачеркнутый.
  • Как удалить документ, таблицу или презентацию
  • Как распечатать файл или изменить настройки страницы
  • Как добавить или удалить колонтитулы и номера страниц
  • Как обрезать и отредактировать изображение
  • Как добавить в документ название, оглавление и заголовок

Шрифты Google уже оптимизированы

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

Давайте посмотрим на шрифт Roboto. GitHub говорит нам, что стандартный вариант этого шрифта весит 168kb:

Тем не менее, если запросить этот же вариант шрифта у Google Font API, то вы получите файл, размер которого будет всего 11kb. Как такое возможно?

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

Если же заменить браузер на Internet Explorer 11, то вы получите шрифт в формате WOFF.

Наконец, если заменить браузер на IE8, то вы получите шрифт в формате EOT (Embedded OpenType).

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

Google Web Fonts

На самом деле, отличный сервис. Как известно, Google плохого не сделает, и здесь они снова — лучшие. Достаточно выбрать необходимые вам шрифты (скорее всего, они появятся, когда вы нажмёте на переключатель Cyrillic). Встроить очень просто:

  1. Через элемент . Строка будет иметь примерно следующий вид.
  2. Через правило @import. Такую строку вставляем в свой CSS-файл в самом верху.@import url(http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);
  3. Через JavaScript.

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

Теперь о недостатках:

  1. Зачастую при первой загрузке страницы текст на странице исчезает, и появляется только тогда, когда загрузка шрифта с CDN Google будет завершена.
  2. Мало шрифтов в коллекции, особенно кириллических. В основном это свободные шрифты, а ведь часто нам нужны наиболее вкусные.
  3. Зависимость от Google. Если завтра они удалят шрифт из коллекции, то на вашем сайте просто исчезнет текст. Не круто.
  4. В странах, где какие-либо сервисы гугла находятся под запретом (например, в Казахстане), ваш текст может очень долго грузиться, и в итоге юзер может либо не увидеть текст, либо увидеть просто-напросто поломанную вёрстку. Сейчас ситуация с этим полегче, но недавно было именно так.
Ссылка на основную публикацию