Roboto google: Как я могу использовать шрифт Google Roboto на веб-сайте?
Содержание
Как установить Google Roboto Font на Windows, Mac и Linux
Шрифт Roboto — это шрифт без засечек, созданный Google со времен Android 4.0 (Ice Cream Sandwich). Это элегантный шрифт, который хорошо отрисовывается на экранах с высоким разрешением, таких как телефоны Android.
Roboto содержит полный набор значений веса шрифта (включая обычный, полужирный, курсив и полужирный курсив) и используется в основном для системных приложения и все приложения Google.
Если вы любите шрифт и хотите использовать его в Windows, Mac, Linux или даже на своем веб-сайте, то вам повезло. Разработчики Google выпустили шрифт Roboto бесплатно, и вы можете использовать его без ограничений (в рамках лицензии на программное обеспечение Apache).
Здесь рассказывается, как установить шрифт Google Roboto на всех платформах.
Загрузить Google Roboto
На какой бы платформе вы ни работали, вам сначала нужно скачать пакет шрифтов Roboto.
Перейдите на сайт шрифтов Roboto и загрузите шрифт (ZIP-файл).
Вам нужно нажать «Выбрать этот шрифт», а затем в нижней части экрана щелкнуть на темной вкладке с надписью «1 выбрано семейство».
Во вновь открывшейся вкладке щелкните значок «Загрузить», чтобы загрузить шрифт Roboto в виде zip-файла.
Извлеките заархивированный файл в папку по вашему выбору. Откройте папку, и вы увидите все шрифты Roboto внутри.
Установите шрифт Roboto в Windows 10
Откройте папку шрифтов Roboto. Выберите все шрифты. Щелкните правой кнопкой мыши и выберите «Установить».
Это установит шрифты на ваш компьютер с Windows. Теперь вы можете использовать шрифт Roboto в своих приложениях.
Установить шрифт Roboto в Linux
Откройте домашнюю папку и включите опцию для просмотра скрытых файлов / папок. Найдите папку .fonts. Если его не существует, создайте его. Затем переместите папку шрифтов Roboto в эту папку .fonts.
Перезапустите LibreOffice, GIMP, Photoshop или любые другие приложения, которые вы используете. Вы должны увидеть шрифт Roboto, доступный для выбора.
Установить шрифт Roboto на Mac
Аналогично Windows. Извлеките шрифты, дважды щелкните, чтобы установить их, и они появятся в вашей книге шрифтов. Кроме того, вы можете перетащить их все в свою книгу шрифтов.
Установить шрифт Roboto на свой веб-сайт
Если вы хотите использовать шрифт Roboto на своем веб-сайте, вы можете используйте синтаксис CSS3 @ font-face для встраивания внешнего шрифта в вашу веб-страницу.
Перейдите на страницу шрифта FontSquirrel Roboto, нажмите «Набор шрифтов», затем выберите предпочитаемые форматы шрифта, подмножество (если есть) и нажмите «Загрузить». @ Font-Face Kit.
Извлеките заархивированный файл в папку шрифтов вашего сайта. Откройте таблицу веб-стилей и добавьте следующий код:
@ font-face {font-family: ‘Roboto’, src: url’Roboto-Regular-webfont.eot ‘, src: url’Roboto-Regular-webfont. eot? #iefix ‘format’embedded-opentype’, url’Roboto-Regular-webfont.woff ‘format’woff’, url’Roboto-Regular-webfont.ttf ‘format’truetype’, url’Roboto-Regular-webfont.svg # RobotoRegular ‘format’svg’, font-weight: normal, font-style: normal, @ font-face {font-family: ‘Roboto’, src: url’Roboto-Italic-webfont.eot ‘, src: url ‘Roboto-Italic-webfont.eot? #Iefix’ format’embedded-opentype ‘, url’Roboto-Italic-webfont.woff’ format’woff ‘, url’Roboto-Italic-webfont.ttf’ format’truetype ‘, url ‘Roboto-Italic-webfont.svg # RobotoItalic’ format’svg ‘, font-weight: normal, font-style: italic, @ font-face {font-family:’ Roboto ‘, src: url’Roboto-Bold-webfont .eot ‘, src: url’Roboto-Bold-webfont.eot? #iefix’ format’embedded-opentype ‘, url’Roboto-Bold-webfont.woff’ format’woff ‘, url’Roboto-Bold-webfont.ttf ‘format’truetype’, url’Roboto-Bold-webfont.svg # RobotoBold ‘format’svg’, font-weight: bold, font-style: normal, @ font-face {font-family: ‘Roboto’, src: url’Roboto-BoldItalic-webfont.eot ‘, src: url’Roboto-BoldItalic-webfont.eot? #iefix’ format’embedded-opentype ‘, url’Roboto-BoldItalic-webfont.woff’ format’woff ‘, url’ Roboto-BoldItalic-webfont.ttf ‘format’truetype’, url’Roboto-Bold Italic-webfont.svg # RobotoBoldItalic ‘format’svg’, font-weight: полужирный, font-style: italic, @ font-face {font-family: ‘Roboto’, src: url’Roboto-Thin-webfont.eot ‘ , src: url’Roboto-Thin-webfont.eot? #iefix ‘format’embedded-opentype’, url’Roboto-Thin-webfont.woff ‘format’woff’, url’Roboto-Thin-webfont.ttf ‘format’ truetype ‘, url’Roboto-Thin-webfont.svg # RobotoThin’ format’svg ‘, font-weight: 200, стиль шрифта: обычный, @ font-face {font-family:’ Roboto ‘, источник: url’Roboto -ThinItalic-WebFont.eot ‘, src: url’Roboto-ThinItalic-webfont.eot? #iefix’ format’embedded-opentype ‘, url’Roboto-ThinItalic-webfont.woff’ format’woff ‘, url’Roboto-ThinItalic-webfont.ttf’ format’truetype ‘, url’Roboto-ThinItalic-webfont.svg # RobotoThinItalic’ format’svg ‘, в соответствии с лицензией на программное обеспечение Apache. font-weight: 200, font-style: italic, @ font-face {font-family: ‘Roboto’, источник: url’Roboto-Light-webfont.eot ‘, источник: url’Roboto-Light-webfont.eot? #iefix ‘format’embedded-opentype’, url’Roboto-Light-webfont.woff ‘format’woff’, url’Roboto-Light-webfont.ttf ‘format’truetype’, url’Roboto-Light-webfont.svg # RobotoLight ‘format’svg’, font-weight: 100, стиль шрифта: нормальный, @ font-face {font-family: ‘Roboto’, src: url’Roboto-LightItalic-webfont.eot ‘, src: url’Roboto -LightItalic-webfont.eot? #Iefix ‘format’embedded-opentype’, url’Roboto-LightItalic-webfont.woff ‘format’woff’, url’Roboto-LightItalic-webfont.ttf ‘format’truetype’, url’Roboto -LightItalic-webfont.svg # RobotoLightItalic ‘format’svg’, font-weight: 100, стиль шрифта: курсив, @ font-face {font-family: ‘Roboto’, источник: url’Roboto-Medium-webfont.eot ‘, src: url’Roboto-Medium-webfont.eot? #iefix’ format’embedded-opentype ‘, url’Roboto-Medium-webfont.woff’ format’woff ‘, url’Roboto-Medium-webfont.ttf’ формат ‘TrueType’, url’Roboto-Medium-webfont.svg # Robo toMedium ‘format’svg’, font-weight: 300, стиль шрифта: обычный, @ font-face {font-family: ‘Roboto’, src: url’Roboto-MediumItalic-webfont.eot ‘, src: url’Roboto -MediumItalic-webfont.eot?#iefix ‘format’embedded-opentype’, url’Roboto-MediumItalic-webfont.woff ‘format’woff’, url’Roboto-MediumItalic-webfont.ttf ‘format’truetype’, url’Roboto-MediumItalic-webfont.svg # RobotoMediumItalic ‘format’svg’, font-weight: 300, font-style: italic,
Убедитесь, что вы изменили src так, чтобы он указывал на путь к папке шрифтов.
Далее вы можете использовать синтаксис
font-family: Roboto,
для отображения шрифта Roboto на вашей веб-странице.
Вот и все. Наслаждайтесь!
Эта статья полезна? Да Нет
Электронные книги
Полное руководство для начинающих по Linux MintПолное руководство для начинающих по Ubuntu 18.04Linux для начинающих Другие электронные книги Комментарии (1)
Просмотров: 449
html — Семейство шрифтов Bootstrap 4 Roboto
Стеки шрифтов для веб-сайтов определенно развивались в последние пару лет, так что это определенно не плохой вопрос.
Мой первый подход к проверке того, как [email protected] импортирует / реализует шрифт Roboto в платформе, заключается в открытии файла bootstrap.css, который можно найти здесь:
node_modules / самозагрузки / расстояние / CSS / bootstrap.css
А затем выполните быстрый текстовый поиск по термину «Робото» и посмотрите, есть ли совпадения в файле. После этого вы увидите, что строка 34 дает первое совпадение и выглядит так:
—font-family-sans-serif: -apple-system, BlinkMacSystemFont, «Segoe UI», Roboto, «Helvetica Neue», Arial, sans-serif, «Apple Color Emoji», «Segoe UI Emoji», «Segoe UI» Символ»;
Мы можем сказать, что существует некая реализация шрифта Roboto. Давайте дважды проверим необработанные файлы scss, которые компилируют готовые к распространению ресурсы, и посмотрим, как это реализовано там, для дальнейшего понимания, которое можно найти здесь:
node_modules / самозагрузки / СКС / _variables.scss
И затем мы сделаем еще один быстрый текстовый поиск для «Робото», который выдаст 1 результат, найденный в строке 234, и будет выглядеть так:
$ font-family-sans-serif: -apple-system, BlinkMacSystemFont, «Segoe UI», Roboto, «Helvetica Neue», Arial, sans-serif, «Apple Color Emoji», «Segoe UI Emoji», «Segoe UI Symbol» » !дефолт;
На первый взгляд, мы заметили, что bootstrap не импортирует шрифт Roboto из Google Fonts. Итак, что происходит? Bootstrap использует стеки системных шрифтов для использования в браузере, используя встроенные свойства сокращения, которые работают со свойством сокращения шрифта. Более подробное объяснение можно найти в этой статье: Новый системный стек шрифтов? а> . Как отмечалось в статье, есть положительные и отрицательные стороны при использовании системных шрифтов, и шрифт, который будет отображаться, является первым шрифтом, доступным на компьютере пользователя.
Если вы хотите предоставить более надежный и согласованный способ проверки шрифта Roboto в том месте, где вы считаете это целесообразным, я бы импортировал шрифт непосредственно из шрифтов Google, найденных здесь: Roboto — Google Fonts (или вы можете настроить статические ресурсы для семейства шрифтов Roboto, как описано здесь: Google Roboto Font — Git Repository, если вы не хотите использовать внешние источники).
Находясь на этой странице, нажмите «Выбранное семейство» и обратите внимание, как вы объявите семейство шрифтов как:
семейство шрифтов: «Roboto», без засечек;
Обратите внимание, что мы больше не будем полагаться на встроенные ключевые слова для свойства сокращенного шрифта с помощью стека системных шрифтов с помощью Roboto и вместо этого будем использовать Roboto для ссылки на семейства шрифтов, импортированные из Google Fonts. Так что, если вы просто добавите эту ссылку в свой заголовок:
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Теперь вы можете объявить все теги h2 для использования семейства шрифтов Roboto следующим образом:
h2 { font-family: 'Roboto', sans-serif; }
Вместо того, чтобы полагаться на стеки системных шрифтов (и, возможно, не отображать ваш предпочтительный шрифт) как таковые:
h2 { font-family: Roboto; }
Надеюсь, это поможет некоторым и счастливого кодирования!
9
jstoobz
29 Июн 2018 в 03:20
Новый агент пользователя Googlebot для смартфонов / Хабр
Уровень подготовки веб-мастера: высокий
Google индексирует контент, оптимизированный для обычных мобильных телефонов и смартфонов с широким набором функций и возможностей, с помощью разных поисковых роботов. Но мы заметили, что, так как они оба называются
Googlebot-Mobile
, это нередко вызывает путаницу. Например, веб-мастера, намереваясь запретить сканирование и индексацию сайта для простых мобильных телефонов с ограниченными техническими возможностями, по ошибке запрещают сканирование сайта для всех устройств. Конечно, все это отрицательно сказывается на посещаемости веб-сайта.
Новый Googlebot для смартфонов
Чтобы веб-мастерам было проще разобраться в настройках, через 3–4 недели мы переименуем агент пользователя в нашем поисковом роботе для смартфонов. Название
Googlebot-Mobile
будет заменено на
Googlebot
с добавлением слова mobile в строку агента пользователя. Вы можете сравнить отличия ниже.
Googlebot – новый агент пользователя для смартфонов:
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25 (compatible;<b>Googlebot</b>/2.1; +http://www.google.com/bot.html)
Googlebot-Mobile – старый агент пользователя для смартфонов, который вскоре будет заменен:
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
Эти изменения касаются только
Googlebot-Mobile
для смартфонов. У обычного робота
Googlebot
останется тот же агент пользователя, а у двух оставшихся поисковых роботов
Googlebot-Mobile
в строке агента пользователя по-прежнему будут указаны телефоны среднего класса. Как это выглядит, смотрите ниже.
Агент пользователя у обычного поискового робота Googlebot:
Mozilla/5.0 (compatible; Googlebot/2.1;
+http://www.google.com/bot.html)
Агенты пользователя у двух поисковых роботов Googlebot-Mobile для телефонов среднего класса:
SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)DoCoMo/2.0 N905i(c100;TB;W24h26) (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
Проверить, смогут ли эти поисковые роботы проиндексировать ваш сайт, можно с помощью функции «
Просмотреть как Googlebot
» в
Инструментах для веб-мастеров
. Полный список наших поисковых роботов опубликован в
Справочном центре
.
Сканирование и индексирование
Обратите внимание, что
после смены поискового агента новый Googlebot для смартфонов будет руководствоваться правилами в robots.txt, метатеге robots и HTTP-заголовках, которые касаются Googlebot, а не Googlebot-Mobile
. Вот, например, правило в
robots.txt
, запрещающее сканировать сайт как обычному роботу
Googlebot
, так и новому роботу
Googlebot
для смартфонов:
User-agent: Googlebot
Disallow: /
А такое правило в
robots.txt
запретит сканирование поисковым роботам Google для простых мобильных телефонов:
User-agent: Googlebot-Mobile
Disallow: /
По нашим подсчетам, это обновление затронет менее 0,001% веб-страниц, но при этом позволит веб-мастерам точнее управлять сканированием и индексацией их контента. Если у вас возникнут вопросы, вы можете:
Лицензия Apache — Википедия
Для этого термина существует аббревиатура «ASL», но под этим сокращением могут пониматься другие значения: см. ASL.
Лицензия Apache (англ. Apache License[Прим. 1]) — лицензия на свободное программное обеспечение Apache Software Foundation.
История версий[править]
Apache License 1.0 — оригинальная лицензия, которая распространяется только на старые версии пакетов (например, версия 1.2 веб-сервера)[1].
Apache License 1.1 была одобрена ASF в 2000 году. Отличие от версии 1.0 описано в пункте «о рекламе (advertising clause)» (раздел 3 лицензии 1.0): производные продукты уже не обязаны использовать атрибуцию в своих рекламных материалах, необходимо лишь указывать её в своей документации[1].
В январе 2004 года ASF утвердила Apache License 2.0. Данная лицензия работает, по существу, как MIT, BSD и Apache License 1.1, с некоторыми дополнительными преимуществами[2]. Например, лицензирование производных работ в рамках других лицензий разрешается при соблюдении условий Apache License 2.0.
Основные изменения: упрощение использования лицензии для не ASF проектов, улучшение совместимости с GPL, возможность использовать ссылку на описание лицензии, вместо того, чтобы описывать её в каждом файле[1].
Условия лицензирования[править]
Подобно любой другой лицензии на свободное программное обеспечение, лицензия Apache даёт пользователю право использовать программное обеспечение для любых целей, свободно распространять, изменять, и распространять изменённые копии, за исключением названия[Прим. 2].
Данная лицензия не ставит условием неизменность лицензии распространения программного обеспечения, и не настаивает даже на сохранении его бесплатного и открытого статуса. Единственным условием, накладываемым лицензией Apache, является информирование получателя о факте использования исходного кода. Таким образом, в противоположность copyleft-лицензиям, получатель модифицированной версии не обязательно получает все права, изначально предоставляемые лицензией Apache.
При распространении программного обеспечения необходимо поместить следующие файлы в корневую директорию:
- LICENSE — файл, содержащий копию текста лицензии Apache;
- NOTICE — текстовый файл, перечисляющий все библиотеки, лицензированные под лицензией Apache вместе с именами их создателей.
В каждом лицензируемом файле должна быть сохранена вся исходная информация о копирайтах или патентах, в каждый изменённый файл должна добавляться информация о проведённых изменениях.
Совместимость с GPL[править]
Фонд Free Software Foundation объявил все версии лицензии Apache несовместимыми со второй версией GPL[3].
Apache Software Foundation, начиная с 2004 года, настаивает на своём праве решать вопрос совместимости Apache лицензии с GPL[4].
Согласно Free Software Foundation, GPLv3 совместима с Apache License v2.0[3][5]. Как следствие, разработчики всегда имеют возможность свои программы под Apache License v2.0 перевести под GPL v3.0, чтобы быть уверенными в том, что производные их разработок (форки) останутся свободными. Однако смена лицензии с GPL на Apache невозможна, поэтому совместимость односторонняя.
- Источники
Andrew M. St. Laurent. Understanding Open Source and Free Software Licensing. — 2004. — 207 с.
Как установить шрифт Google Roboto в Windows, Mac и Linux
Шрифт Roboto — это шрифт без засечек, созданный Google. Он элегантен и хорошо отображается на экранах с высоким разрешением, таких как телефоны Android. Таким образом, он идеально подходит для многих приложений. Более того, установить шрифт Roboto в Windows, macOS и Linux совсем несложно.
В этом посте мы покажем вам, как установить шрифт Google Roboto в Windows, macOS, Linux и даже на ваш веб-сайт.Давайте начнем!
Загрузка шрифта Google Roboto
Независимо от вашей платформы, вам сначала необходимо загрузить пакет шрифтов Roboto. Для этого зайдите на сайт шрифтов Roboto. Самый простой способ загрузить все семейство шрифтов — нажать кнопку «Загрузить семейство».
Он будет в виде ZIP-файла на вашем компьютере, после чего вы сможете установить его в своей операционной системе (ОС).
Как установить шрифт Google Roboto в Windows, Mac и Linux
Хорошая новость заключается в том, что независимо от того, на какой платформе вы хотите установить шрифт Roboto, это займет всего несколько кликов.
Также читайте: Как установить и управлять шрифтами в Windows 10
1. Windows 10
Для Windows сначала распакуйте папку шрифтов Roboto. Затем перейдите в меню «Пуск» и откройте страницу настроек.
Отсюда выберите параметр «Персонализация», а затем «Шрифты».
Затем перетащите извлеченные шрифты в окно установщика. Через несколько секунд шрифт Google Roboto будет установлен в Windows. Вы можете выбрать его, как любой другой шрифт в установленных приложениях.
2. macOS
Для Mac: сначала извлеките ZIP-файл, затем выберите все шрифты в папке (пропуская LICENSE.txt), щелкните правой кнопкой мыши и выберите «Открыть с помощью -> Книга шрифтов» в контекстном меню.
Это загрузит их в книгу шрифтов и сделает их доступными для использования в ваших приложениях.
Обратите внимание, что вы также можете дважды щелкнуть отдельные файлы шрифтов, чтобы загрузить их в книгу шрифтов.
3. Linux
Откройте домашнюю папку и включите опцию просмотра скрытых файлов / папок.Найдите папку «.fonts». Если его не существует, создайте его. Затем переместите папку шрифтов Roboto в эту папку «.fonts».
Кроме того, вы можете использовать программу Font Manager для управления шрифтами.
1. Установите Font Manger из Центра программного обеспечения или репозитория.
2. После установки откройте это и приложение Fonts (снова из панели поиска).
3. Убедитесь, что в Диспетчере шрифтов вы находитесь на вкладке «Управление» и щелкните значок «Плюс».
4. Перейдите в папку с извлеченными шрифтами и добавьте их по мере необходимости.
После перезапуска используемых приложений вы должны увидеть шрифт Roboto, доступный для выбора.
Использование шрифта Google Roboto на веб-сайте
Если вы хотите использовать шрифт Roboto на своем веб-сайте, вы можете использовать синтаксис CSS3 @ font-face для встраивания внешнего шрифта на свою веб-страницу.
Перейдите на страницу шрифтов FontSquirrel Roboto, нажмите «Webfont Kit», затем выберите предпочтительные форматы шрифтов, подмножество (если есть) и нажмите «Загрузить @ Font-Face Kit».”
Распакуйте заархивированный файл в папку шрифтов вашего веб-сайта. Откройте свою веб-таблицу стилей и добавьте следующий код:
@ font-face {
семейство шрифтов: 'Робото';
src: url ('Roboto-Regular-webfont.eot');
src: url ('Roboto-Regular-webfont.eot? #iefix') формат ('embedded-opentype'),
url ('Roboto-Regular-webfont.woff') формат ('woff'),
url ('Roboto-Regular-webfont.ttf') формат ('truetype'),
url ('Roboto-Regular-webfont.svg # RobotoRegular') формат ('svg');
шрифт: нормальный;
стиль шрифта: нормальный;
}
@ font-face {
семейство шрифтов: 'Робото';
src: url ('Roboto-Italic-webfont.eot ');
src: url ('Roboto-Italic-webfont.eot? #iefix') формат ('embedded-opentype'),
url ('Roboto-Italic-webfont.woff') формат ('woff'),
url ('Roboto-Italic-webfont.ttf') формат ('truetype'),
url ('Roboto-Italic-webfont.svg # RobotoItalic') формат ('svg');
шрифт: нормальный;
стиль шрифта: курсив;
}
@ font-face {
семейство шрифтов: 'Робото';
src: url ('Roboto-Bold-webfont.eot');
src: url ('Roboto-Bold-webfont.eot? #iefix') формат ('embedded-opentype'),
url ('Roboto-Bold-webfont.woff ') формат (' woff '),
url ('Roboto-Bold-webfont.ttf') формат ('truetype'),
url ('Roboto-Bold-webfont.svg # RobotoBold') формат ('svg');
font-weight: жирный;
стиль шрифта: нормальный;
}
@ font-face {
семейство шрифтов: 'Робото';
src: url ('Roboto-BoldItalic-webfont.eot');
src: url ('Roboto-BoldItalic-webfont.eot? #iefix') формат ('embedded-opentype'),
url ('Roboto-BoldItalic-webfont.woff') формат ('woff'),
url ('Roboto-BoldItalic-webfont.ttf') формат ('truetype'),
url ('Roboto-BoldItalic-webfont.svg # RobotoBoldItalic ') формат (' svg ');
font-weight: жирный;
стиль шрифта: курсив;
}
@ font-face {
семейство шрифтов: 'Робото';
src: url ('Roboto-Thin-webfont.eot');
src: url ('Roboto-Thin-webfont.eot? #iefix') формат ('embedded-opentype'),
url ('Roboto-Thin-webfont.woff') формат ('woff'),
url ('Roboto-Thin-webfont.ttf') формат ('truetype'),
url ('Roboto-Thin-webfont.svg # RobotoThin') формат ('svg');
font-weight: 200;
стиль шрифта: нормальный;
}
@ font-face {
семейство шрифтов: 'Робото';
src: url ('Roboto-ThinItalic-webfont.eot ');
src: url ('Roboto-ThinItalic-webfont.eot? #iefix') формат ('embedded-opentype'),
url ('Roboto-ThinItalic-webfont.woff') формат ('woff'),
url ('Roboto-ThinItalic-webfont.ttf') формат ('truetype'),
url ('Roboto-ThinItalic-webfont.svg # RobotoThinItalic') формат ('svg'); (под лицензией на программное обеспечение Apache).
font-weight: 200;
стиль шрифта: курсив;
}
@ font-face {
семейство шрифтов: 'Робото';
src: url ('Roboto-Light-webfont.eot');
src: url ('Roboto-Light-webfont.eot? #iefix ') формат (' embedded-opentype '),
url ('Roboto-Light-webfont.woff') формат ('woff'),
url ('Roboto-Light-webfont.ttf') формат ('truetype'),
url ('Roboto-Light-webfont.svg # RobotoLight') формат ('svg');
font-weight: 100;
стиль шрифта: нормальный;
}
@ font-face {
семейство шрифтов: 'Робото';
src: url ('Roboto-LightItalic-webfont.eot');
src: url ('Roboto-LightItalic-webfont.eot? #iefix') формат ('embedded-opentype'),
url ('Roboto-LightItalic-webfont.woff') формат ('woff'),
url ('Roboto-LightItalic-webfont.ttf ') формат (' истинный тип '),
url ('Roboto-LightItalic-webfont.svg # RobotoLightItalic') формат ('svg');
font-weight: 100;
стиль шрифта: курсив;
}
@ font-face {
семейство шрифтов: 'Робото';
src: url ('Roboto-Medium-webfont.eot');
src: url ('Roboto-Medium-webfont.eot? #iefix') формат ('embedded-opentype'),
url ('Roboto-Medium-webfont.woff') формат ('woff'),
url ('Roboto-Medium-webfont.ttf') формат ('truetype'),
url ('Roboto-Medium-webfont.svg # RobotoMedium') формат ('svg');
font-weight: 300;
стиль шрифта: нормальный;
}
@ font-face {
семейство шрифтов: 'Робото';
src: url ('Roboto-MediumItalic-webfont.eot ');
src: url ('Roboto-MediumItalic-webfont.eot? #iefix') формат ('embedded-opentype'),
url ('Roboto-MediumItalic-webfont.woff') формат ('woff'),
url ('Roboto-MediumItalic-webfont.ttf') формат ('truetype'),
url ('Roboto-MediumItalic-webfont.svg # RobotoMediumItalic') формат ('svg');
font-weight: 300;
стиль шрифта: курсив;
} Убедитесь, что вы изменили «src» так, чтобы он указывал на путь к папке шрифтов.
Далее вы можете использовать синтаксис font-family: "Roboto"; для отображения шрифта Roboto на вашей веб-странице.
Заключение
Шрифт Google Roboto — стильная альтернатива таким традиционным шрифтам, как Helvetica и Arial. Более того, он находится в авангарде инициативы Google в области дизайна материалов. Тем не менее, Roboto работает со всеми приложениями, и установить его в Windows, macOS, Linux и даже на ваш веб-сайт очень просто.
Если вы не являетесь поклонником Roboto, наша статья о том, как проверить различные элементы дизайна сайта, может помочь вам узнать, какие шрифты используются на конкретном веб-сайте.Используете ли вы шрифт Roboto на своем компьютере, и если да, то с какой целью? Дайте нам знать в комментариях ниже!
Эта статья полезна?
да
Нет
Том Рэнкин
Том Рэнкин (Tom Rankin) — качественный писатель контента для WordPress, технологий и малого бизнеса.Когда он не прикасается к клавиатуре, его можно обнаружить, когда он фотографирует, пишет музыку, играет в компьютерные игры и разговаривает от третьего лица.
@ expo-google-fonts / roboto — npm
.
Этот пакет позволяет использовать семейство шрифтов Roboto из Google Fonts в приложении Expo.
Робото
Это семейство шрифтов содержит 12 стилей.
-
Робото_100 Тонкий -
Roboto_100Thin_Italic -
Roboto_300Light -
Roboto_300Light_Italic -
Roboto_400 Обычный -
Roboto_400Regular_Italic -
Roboto_500Средний -
Roboto_500Medium_Italic -
Roboto_700Bold -
Roboto_700Bold_Italic -
Roboto_900 Черный -
Roboto_900Black_Italic
Использование
Запустите эту команду из оболочки в корневом каталоге вашего проекта Expo, чтобы добавить пакет семейства шрифтов в ваш проект.
expo install @ expo-google-fonts / roboto expo-font
Теперь добавьте такой код в свой проект
импортировать React, {useState, useEffect} из «реагировать»;
import {Text, View, StyleSheet} из 'react-native';
импортировать {AppLoading} из 'expo';
Импортировать {
useFonts,
Робото_100Тонкий,
Roboto_100Thin_Italic,
Робото_300Свет,
Roboto_300Light_Italic,
Roboto_400Регулярный,
Roboto_400Regular_Italic,
Робото_500Средний,
Roboto_500Medium_Italic,
Roboto_700Bold,
Roboto_700Bold_Italic,
Roboto_900 Черный,
Roboto_900Черный_Итальянский,
} из '@ expo-google-fonts / roboto';
экспорт по умолчанию () => {
let [fontsLoaded] = useFonts ({
Робото_100Тонкий,
Roboto_100Thin_Italic,
Робото_300Свет,
Roboto_300Light_Italic,
Roboto_400Регулярный,
Roboto_400Regular_Italic,
Робото_500Средний,
Roboto_500Medium_Italic,
Roboto_700Bold,
Roboto_700Bold_Italic,
Roboto_900 Черный,
Roboto_900Черный_Итальянский,
});
пусть fontSize = 24;
let paddingVertical = 6;
if (! fontsLoaded) {
return
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_100Thin',
}}>
Робото Тонкий
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_100Thin_Italic',
}}>
Робото Тонкий Курсив
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_300Light',
}}>
Робото Свет
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_300Light_Italic',
}}>
Робото Светлый Курсив
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_400Regular',
}}>
Робото Обычный
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_400Regular_Italic',
}}>
Roboto Italic
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_500Medium',
}}>
Робото Средний
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_500Medium_Italic',
}}>
Roboto, средний курсив
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_700Bold',
}}>
Roboto Bold
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_700Bold_Italic',
}}>
Roboto Bold Курсив
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_900Black',
}}>
Робото Черный
<Текст
style = {{
размер шрифта,
paddingVertical,
// Обратите внимание на цитирование значения для `fontFamily` здесь; он ожидает строку!
fontFamily: 'Roboto_900Black_Italic',
}}>
Робото Черный Курсив
);
}
}; 🔡 Галерея
👩💻 Использование во время разработки
Если вы пробуете много разных шрифтов, вы можете попробовать использовать пакет @ expo-google-fonts / dev .
Вы можете импортировать любой стиль шрифта из любого пакета Expo Google Fonts из него. Он загрузит шрифты
по сети во время выполнения вместо добавления ресурса в проект в виде файла, поэтому это может занять больше времени
чтобы ваше приложение стало интерактивным при запуске, но это очень удобно
для игры с любым стилем, который вы хотите.
📖 Лицензия
Пакет @ expo-google-fonts / roboto и его код выпущены под лицензией MIT.
Все шрифты в каталоге Google Fonts бесплатны и имеют открытый исходный код.
Проверьте страницу Roboto в Google Fonts, чтобы узнать о конкретной лицензии на это семейство шрифтов.
Вы можете свободно использовать эти шрифты в своих продуктах и проектах — печатных или цифровых, коммерческих или иных. Однако вы не можете продавать шрифты сами по себе. Это не юридическая консультация. Проконсультируйтесь с юристом и ознакомьтесь со всеми подробностями в полной лицензии.
🔗 Ссылки
🤝 Содействие
Взносы приветствуются! Весь этот каталог, включая то, что вы сейчас читаете, был создан из кода.Вместо того, чтобы отправлять PR напрямую, пожалуйста, сделайте взносы в генератор.
Блог разработчиков
Google: Новый Робото
Наряду с рекомендациями по материальному дизайну мы выпустили новую версию семейства шрифтов Roboto. Многое изменилось, когда мы настроили шрифт для работы с экранами большего размера и в разных условиях, от часов до настольных компьютеров, от телевизоров до автомобилей. Он по-прежнему сохраняет большую часть своего характера, что сделало его успешным как для телефонов, так и для планшетов, но почти каждый глиф был так или иначе изменен и обновлен.Мы рассматриваем Roboto как развивающееся семейство шрифтов и планируем продолжать изменять и обновлять его по мере развития системы. Раньше считалось, что семейство шрифтов проектировалось один раз, а затем использовалось без изменений в течение многих лет. Иногда обновленная версия выпускалась с новым именем, иногда с добавлением «Neue» или «New». Старая модель выпуска металлических шрифтов не имеет смысла для операционной системы, которая постоянно совершенствуется. По мере того, как система развивается с течением времени, тип должен развиваться вместе с ней.
Самый простой способ определить новую версию — поискать буквы R и K.Это были некоторые из более грубых символов из первой версии, которые были полностью перерисованы. Также проверьте наличие точек на букве i или в знаках препинания. Мы округлили их, чтобы типы стали немного более дружелюбными, когда вы на них внимательно смотрите. Мы также округлили стороны символов верхнего регистра, таких как O и C, что делает шрифт менее сжатым, хотя он по-прежнему имеет большое количество символов в строке.
Некоторые из наиболее значительных изменений касаются ритма и интервала, особенно для заглавных букв.Это не очевидно, когда вы смотрите на отдельные глифы, но улучшает текстуру на экране. Некоторые из наиболее тонких исправлений заключались в балансировании веса между заглавными буквами и строчными буквами (в этой версии заглавные буквы немного тяжелее) и улучшенной коррекции искажений, возникающих в наклонных курсивных символах.
В конечном итоге цель шрифта — служить контенту и помогать людям его понять. Мы думаем, что новые обновления Roboto вместе с новыми рекомендациями по материальному дизайну помогут ему добиться большего.
Автор: Луис Грей, сотрудник Google
Автор: Кристиан Робертсон, визуальный дизайнер Android.
Наряду с рекомендациями по материальному дизайну мы выпустили новую версию семейства шрифтов Roboto. Многое изменилось, когда мы настроили шрифт для работы с экранами большего размера и в разных условиях, от часов до настольных компьютеров, от телевизоров до автомобилей. Он по-прежнему сохраняет большую часть своего характера, что сделало его успешным как для телефонов, так и для планшетов, но почти каждый глиф был так или иначе изменен и обновлен.Мы рассматриваем Roboto как развивающееся семейство шрифтов и планируем продолжать изменять и обновлять его по мере развития системы. Раньше считалось, что семейство шрифтов проектировалось один раз, а затем использовалось без изменений в течение многих лет. Иногда обновленная версия выпускалась с новым именем, иногда с добавлением «Neue» или «New». Старая модель выпуска металлических шрифтов не имеет смысла для операционной системы, которая постоянно совершенствуется. По мере того, как система развивается с течением времени, тип должен развиваться вместе с ней.
Самый простой способ определить новую версию — поискать буквы R и K.Это были некоторые из более грубых символов из первой версии, которые были полностью перерисованы. Также проверьте наличие точек на букве i или в знаках препинания. Мы округлили их, чтобы типы стали немного более дружелюбными, когда вы на них внимательно смотрите. Мы также округлили стороны символов верхнего регистра, таких как O и C, что делает шрифт менее сжатым, хотя он по-прежнему имеет большое количество символов в строке.
Некоторые из наиболее значительных изменений касаются ритма и интервала, особенно для заглавных букв.Это не очевидно, когда вы смотрите на отдельные глифы, но улучшает текстуру на экране. Некоторые из наиболее тонких исправлений заключались в балансировании веса между заглавными буквами и строчными буквами (в этой версии заглавные буквы немного тяжелее) и улучшенной коррекции искажений, возникающих в наклонных курсивных символах.
В конечном итоге цель шрифта — служить контенту и помогать людям его понять. Мы думаем, что новые обновления Roboto вместе с новыми рекомендациями по материальному дизайну помогут ему добиться большего.
Автор: Луис Грей, сотрудник Google
Утечка редизайна Gmail показывает, что Roboto заменяет Arial в качестве шрифта по умолчанию — Quartz
. Вы, вероятно, устали от шрифта Arial, даже если вы этого не знаете. Как шрифт Gmail по умолчанию, известный как «без засечек» в интерфейсе Gmail, — это средство, через которое вы в течение многих лет получаете спам, счета, просьбы нуждающихся членов семьи и требования начальства и коллег.
Теперь правление Ариала, возможно, подходит к концу.Ранее на этой неделе The Verge и Android Authority сообщили, что они получили внутренние электронные письма Google о предстоящем изменении дизайна Gmail. Продукт Gmail, несмотря на (или, возможно, из-за) его популярности и повсеместного распространения, не подвергался изменениям с 2011 года, то есть много лет в Интернете. Ожидаемый фейслифтинг, по-видимому, включает ряд функциональных изменений, в том числе функцию «отложить», которая временно удаляет выбранное письмо из вашего почтового ящика, а затем возвращается позже, а также более унифицированную интеграцию с Календарем Google.
Но для любителей шрифтов самая большая новость связана с дисплеем. Шрифт интерфейса Gmail (например, пункты меню) изменится с Arial на Product Sans, а шрифт по умолчанию для электронной почты и сообщений изменится с Arial на Roboto. И Product Sans, и Roboto — это шрифты, созданные Google, и, если просочившийся редизайн осуществится, это будет долгожданное изменение.
Product Sans — шрифт в стиле Futura, разработанный Google в 2015 году для целей брендинга; Вы можете узнать его по текущему логотипу Google, который также заменил старый логотип с засечками в 2015 году.Робото напоминает Arial или Helvetica; Google работает над шрифтом с 2011 года. Сейчас это основной шрифт в операционной системе Android, и, если редизайн Gmail станет каким-либо указанием, он, вероятно, станет стандартным шрифтом Google на всех его платформах.
Product Sans будет относительно легким элементом дизайна для таких вещей, как заголовки и меню, но Roboto повлияет на большинство слов, которые сотни миллионов людей читают каждый день. Так что стоит подумать о том, как изменится наш цифровой опыт работы с Gmail, когда Arial исчезнет, а Roboto появится.
И Arial, и Roboto представляют собой современные шрифты без засечек, и по буквам они довольно похожи. В Roboto есть несколько небольших изменений на уровне отдельных персонажей. Заглавная буква Q (Arial слева, Roboto справа), вероятно, является самым большим изменением:
Quartz
Заглавная Q в Arial (слева) и Roboto.
Еще одно заметное изменение — линия в знаке доллара:
Quartz
Знак доллара в Arial (слева) и Roboto.
Другие изменения на уровне символов включают в себя замену квадратной точки на строчных буквах «i» и «j», а также вопросительного знака на круглую точку:
Вопросительный знак и строчные «i» и «j». »В Arial (слева) и Roboto.
Но на самом деле самая большая разница в межсимвольном интервале. Символы Roboto тоньше, чем Arial, оставляя больше пробелов между буквами:
Quartz
Отслеживание символов в Arial (вверху) и Roboto.
Интервал между символами может показаться тривиальным, но он имеет огромное значение для восприятия длинных блоков текста. Я редактор, который работает в основном с Google Docs, где Arial также является шрифтом по умолчанию, и первое, что я делаю, когда получаю новый документ, — это меняю шрифт, который мне кажется Arial скучным и страдающим клаустрофобией; У меня есть вращающийся набор шрифтов, которые я использую вместо этого, включая Roboto, несколько других с еще более широким естественным отслеживанием, например, мой нынешний фаворит, Nunito.Внизу, сверху вниз, расположены Arial, Roboto и Nunito:
Quartz
Сверху вниз: Arial, Roboto и Nunito
Для большинства людей разница между Arial и Roboto наиболее ярко проявляется на смартфонах. . Решение Google в отношении Gmail свидетельствует о более широком переходе компаний, занимающихся технологическими платформами, от привычных шрифтов эпохи настольных компьютеров, в том числе Arial и Helvetica Prime, к новым шрифтам, разработанным специально для мобильных устройств.
Google был первым, кто применил мобильные шрифты к семейству шрифтов Droid, выпущенному в конце 2000-х для своих первых смартфонов.Но эти шрифты выглядели не совсем правильно, когда разрешение экрана телефона начало быстро улучшаться. Следующим шагом Google был робот Roboto; первая версия Roboto была выпущена в 2011 году, и в течение следующих нескольких лет компания настраивала ее, пока в 2015 году она не попала в версию, широко используемую в ее мобильных операционных системах Android.
Тем временем Apple выпустила свой собственный шрифт без засечек San Francisco для мобильных устройств в 2014 году. К настоящему времени Helvetica Neue и Lucida Grande были более или менее полностью заменены San Francisco по умолчанию в macOS и iOS от Apple.Apple, как и Google, выбрала более высокий и тонкий шрифт с большей передышкой (Helvetica Neue вверху, Сан-Франциско внизу):
Quartz
Отслеживание букв в Helvetic Nue (вверху) и Сан-Франциско.
Не всем нравятся эти шрифты для мобильных устройств. Они имеют тенденцию быть немного более округлыми — и Google, и Apple называют свои шрифты «более дружелюбными», чем их предшественники, что, по словам некоторых дизайнеров, затрудняет их чтение. Критики дизайна особым образом высмеяли Roboto, назвав его мошенничеством с Arial, и первоначальная общественная реакция на Сан-Франциско была решительно негативной (хотя дизайнеры, похоже, по крайней мере не возражали).Я, например, приветствую вторжение более легкого и легкого типа.
Что бы вы ни думали, на каком-то уровне вы почувствуете эти шрифты для операционных систем, разработанные Valley. В отличие от вашего выбора использовать Garamond в своем резюме или решения новой кофейни оформить регистрацию в Bodoni, выбор Arial от Google омывает вас каждый день, несколько раз в день, в течение многих лет. Пришло время искупаться в Робото.
Почему Google обновляет свой шрифт, как и все остальные
В эпоху цифровых технологий печатный станок в значительной степени пошел по пути Додо, но мы по-прежнему относимся к дизайну шрифтов как к постоянному, как если бы он был составлен из многовековые металлические блоки.Вы просто не «настраиваете» шрифт… не так ли?
Google так думает. Сегодня Google анонсировал пересмотр Roboto, системного шрифта Android, впервые представленного два года назад. Roboto 2.0 — это больше, чем просто серия оптимизаций для подготовки Android к новой волне устройств. Он призван доказать, что шрифты больше не нужно выделять на камне.
Дизайнер Roboto, Кристиан Робертсон, всегда утверждал, что шрифт находится в стадии разработки. «Старая модель выпуска металлических шрифтов не имеет смысла для операционной системы, которая постоянно совершенствуется», — говорит Робертсон.
Другими словами, по мере развития Android должен развиваться и Roboto. Каждый раз, когда Android поддерживает новый тип устройства, который теперь включает телефоны, планшеты, компьютеры, телевизоры и часы, или меняет философию дизайна, Roboto следует пересматривать и настраивать, чтобы убедиться, что он по-прежнему выполняет то, что должно делать типографика. : быть скелетом дизайна интерфейса.
«Сравните Android Wear с Android TV, — говорит Матиас Дуарте, директор Google по работе с Android. «На 2-дюймовых умных часах текст придется втиснуть в небольшой узкий столбец, что придаст ему другой ритм, чем при отображении того же текста на широком 50-дюймовом экране телевизора.«Но Roboto должен хорошо работать в обоих, а также в сотнях других контекстов.
Ритм сложно определить количественно. Если ваш шрифт в одних местах выглядит слишком сморщенным, чем в других, например, вы не можете просто усреднить расстояние между символами и назвать это днем, потому что наши глаза интерпретируют пробелы по-разному: например, заглавная буква «F», может выглядеть дальше друг от друга рядом со строчной буквой «е», чем если бы она была рядом с буквой «а», даже если расстояние между ними было точно таким же.
Робото следует пересмотреть и настроить, чтобы убедиться, что он по-прежнему выполняет то, что должно делать типографика: быть скелетом дизайна интерфейса.
Отсюда потребность в развивающемся шрифте, который так же реагировал бы на критику, как и на пользовательское тестирование. «Таким образом мы планируем сохранить надежность Roboto с течением времени», — говорит Робертсон. «Большинство людей не могут четко сформулировать свою реакцию на шрифт. Самое главное — донести его до людей и посмотреть, как они с ним взаимодействуют.
Впервые выпущенный Google в начале 2012 года в качестве замены общесистемного шрифта Droid, Roboto был разработан как более современный и доступный шрифт, который отлично смотрелся бы на устройствах с высоким разрешением. Но критики типографики относились к Google недоброжелательно.
Ссылаясь на смесь различных типографских стилей, Стивен Коулз из Typographica сказал: «[Roboto] — это не шрифт. Это… четырехголовый Франкенштейн. Никогда не знаешь, какую личность получишь ». Между тем другие критики утверждали, что Roboto был не чем иным, как плохим клоном Helvetica: супербледным шрифтом без засечек, который войдет в историю как собственная версия Arial от Google.
Хотя критики все еще могут высмеивать его как клон Helvetica или Frankenfont, Roboto 2.0 решает многие проблемы с исходной версией. Подавляющее большинство настроек Roboto связано с тем, как буквы выглядят вместе, не только в словах и предложениях, но и на экранах разных типов. Это незаметно, но эти изменения — округленная буква «O» здесь, сбритая пара пикселей и «l» там — придают гарнитуре другой баланс, чем раньше.
«Системный шрифт для операционной системы должен помогать придавать характер UI, но вы все равно не хотите, чтобы люди зацикливались на определенных глифах», — говорит мне Робертсон.Хотя буквы «K» и «R» были одними из наиболее характерных для Roboto, два года обратной связи показали Google, что их нужно набирать обратно. «С системным шрифтом вы действительно не хотите, чтобы люди говорили, о, вот опять та странная буква« K »», — говорит Робертсон.
В Roboto 2.0 были изменены и другие подобные «проблемные символы». Большинство пользователей, например, никогда не заметят, что нижние клеммы строчных «е» и «g» были закрыты, тогда как, как и раньше, они были более открытыми. Но когда Roboto был впервые выпущен, многие критики сочли дизайн букв «e» и «g» на грани святотатства, что привело к тому, что Google откатил его в этом выпуске.
«Таким образом мы сознательно пытались раздвинуть границы», — признает Робертсон. «Люди действуют так, как будто есть это жесткое правило для разработки шрифтов без засечек, которое, скажем, если ваша буква« а »закрыта, ваша буква« е »тоже должна быть закрыта. Мы не думали, что это обязательно правда, и поэтому попытались поэкспериментировать с этим ».
Но Roboto 2.0 не просто реагирует на критику пользователей. Компания также учитывает уроки, извлеченные из тестирования новых продуктов, таких как Android Auto.Некоторые из более тонких изменений дизайна Roboto произошли после тестирования того, насколько хорошо Roboto работает в настройках приборной панели. Оснастив пользователей специальными жидкокристаллическими очками, которые включаются и выключаются для имитации максимального времени, в течение которого Национальная комиссия по безопасности дорожного движения считает безопасным отводить взгляд от дороги во время вождения автомобиля, Google смогла внести изменения в Roboto, чтобы улучшить его читаемость как на дороге, так и вне ее.
На самом деле, хотя критики могут спорить о достоинствах Roboto, Google считает, что он такой же, как и любые другие свои продукты, от поиска до Gmail и Android.Робото не существует в виде тысяч символов, вырезанных на отдельных металлических блоках; это чисто цифровая конструкция. Почему бы не относиться к нему как к единому целому и постоянно поддерживать его?
Roboto — HandWiki
Краткое описание
Семейство шрифтов без засечек в неогротескном стиле, разработанное Google
Roboto () [2] — семейство шрифтов без засечек в неогротескном стиле, разработанное Google в качестве системного шрифта для своей мобильной операционной системы Android и выпущенное в 2011 году для Android 4.0 «Сэндвич с мороженым». [3]
Все семейство шрифтов находится под лицензией Apache. [4] В 2014 году Roboto был переработан для Android 5.0 «Lollipop».
Используйте
Roboto — шрифт по умолчанию на Android, а с 2013 года и в других сервисах Google, таких как Google+, Google Play, YouTube, Google Maps, [5], и Google Images.
В 2017 году Roboto использовался на ЖК-часах обратного отсчета линий B в метро Нью-Йорка.
Roboto Bold — шрифт по умолчанию в Unreal Engine 4 и Kodi. [6] Roboto Condensed используется для отображения информации о европейских версиях упаковки Nintendo Switch, включая физические выпуски игр.
Развитие
Android 5.1.1 на Google Nexus 7 с измененным шрифтом Roboto
Roboto в 2013 году, до редизайна для Android 5
Шрифт был полностью разработан Кристианом Робертсоном, который ранее выпустил расширенный шрифт Ubuntu-Title через свою собственную типографию Betatype. [7] [8] Шрифт был официально доступен для бесплатной загрузки 12 января 2012 года на недавно запущенном веб-сайте Android Design.
По сравнению с предыдущим системным шрифтом Android, гуманистическим шрифтом без засечек Droid, Roboto принадлежит к неогротескному жанру шрифтов без засечек. Он включает в себя тонкие, светлые, обычные, средние, полужирные и черные начертания с соответствующими наклонными стилями, а не курсивом. Он также включает сжатые стили светлого, обычного и жирного шрифтов, а также соответствующие наклонные рисунки.
Редизайн
В 2014 году Матиас Дуарте объявил на Google I / O, что Roboto был значительно переработан для Android 5.0 «Lollipop». [8] [9] Знаки препинания и заголовки в нижнем регистре «i» и «j» были изменены с квадратных на закругленные, а весь шрифт был сделан «немного шире и округлее» с множеством изменений в деталях. [8] [9]
Приемная
Google разработал шрифт как «современный, но доступный» и «эмоциональный» [10] [11] , но Roboto получил неоднозначные отзывы о своем выпуске.Джошуа Топольски, главный редактор технологической сети новостей и СМИ The Verge , описывает шрифт как «чистый и современный, но не слишком футуристический — не шрифт из научной фантастики». [12] Тем не менее, комментатор по типографике Стивен Коулз из Typographica назвал первоначальный выпуск Roboto «четырехглавым Frankenfont», описав его как «мешанину» различных типографских стилей, которые не работают вместе. [8] Другие профессионалы в области шрифтового дизайна называли очевидные ошибки в акцентированных глифах, в то время как Джон Грубер назвал шрифт «мошенничеством с Helvetica». [13] [14]
Поддержка языков
Roboto поддерживает латинские, греческие (частичные) и кириллические шрифты. [15]
В Android шрифт Noto используется для языков, не поддерживаемых Roboto, включая китайский (упрощенный и традиционный), японский, корейский, тайский и хинди. [16]
Варианты
Робото плита
Roboto Slab — это шрифт с засечками, основанный на Roboto. Он был представлен в марте 2013 года в качестве шрифта по умолчанию в службе заметок Google Google Keep. [17] (Шрифт был изменен на Roboto без засечек в 2018 году.) [18] Он доступен в четырех вариантах толщины: тонкий, светлый, обычный и полужирный. Однако косых версий для него не было выпущено. В ноябре 2019 года шрифт был обновлен и добавлены 5 новых толщин: Extra-Light, Medium, Semi-Bold, Extra-Bold и Black, а также изменяемая ось шрифта в диапазоне от 100 до 900. Он также был изменен с некоторыми характеристиками из sans-serif Roboto и слегка напоминать большинство шрифтов с засечками, таких как «R», «K», «k», «g», «C», «S» и т. д.
Робото Моно
Roboto Mono — моноширинный шрифт на основе Roboto. Он доступен в семи вариантах толщины: тонкий, сверхлегкий, легкий, обычный, средний, полужирный и жирный, с наклонными штрихами для каждого веса. [19]
Heebo
Heebo — это расширение Roboto, которое включает символы на иврите. [20]
См. Также
Список литературы
- ↑ «Шрифт Crique Grotesk». https://www.myfonts.com/fonts/stawix/crique-grotesk.
- ↑ «Создание материального дизайна: усовершенствование робото». Дизайн Google. https://www.youtube.com/watch?v=6WxACOHm0_g.
- ↑ Исаак, Майк (19 октября 2011 г.). «Google Unwraps Ice Cream Sandwich, ОС Android нового поколения». https://www.wired.com/2011/10/android-ice-cream-sandwich-3.
- ↑ «Лицензия на семейство шрифтов Roboto». https://www.fontsquirrel.com/license/roboto.
- ↑ Грэм-Смит, Дариен (17 мая 2013 г.). «Руки вперед с новыми картами Google». http: // www.alphr.com/blogs/2013/05/17/hands-on-with-the-new-google-maps.
- ↑ Бетцен, Натан (5 июня 2012 г.). «XBMC 11.0 — майский цикл (обновлено)». https://kodi.tv/article/xbmc-110-may-cycle-updated.
- ↑ «Кристиан Робертсон. Интерфейс, шрифтовой дизайнер.». http://www.christianrobertson.com.
- ↑ 8,0 8,1 8,2 8,3 Коулз, Стивен (19 октября 2011 г.). «Робото был четырехглавым Франкенфонтом». http://typographica.org/on-typography/roboto-typeface-is-a-four-headed-frankenstein.
- ↑ 9.0 9.1 «Загрузить: новый робот для Android L и Material Design». https://www.droid-life.com/2014/06/25/download-new-roboto-for-android-l-and-material-design/.
- ↑ О’Брайен, Терренс (18 октября 2011 г.). «Шрифт Roboto и новая философия дизайна Android 4.0, Ice Cream Sandwich». https://www.engadget.com/2011/10/18/roboto-and-the-new-design-philosophy-of-android-4-0-ice-cream-s.
- ↑ «Android Ice Cream Sandwich: 10 лучших функций, которые делают его восхитительным».19 октября 2011 г. https://news.in.msn.com/technology/article.aspx?cp-documentid=5526341.
- ↑ Топольский, Джошуа (18 октября 2011 г.). «Эксклюзив: Матиас Дуарте о философии Android и подробный взгляд на Ice Cream Sandwich». https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus.
- ↑ Кёберлин, Кристоф (19 октября 2011 г.). «Мои Робото-фавориты, спонтанно: ǻ ę į ø ß». https://twitter.com/koeberlin/status/126604754871795712.
- ↑ Грубер, Джон (19 октября 2011 г.). «Робото против Helvetica». https://daringfireball.net/linked/2011/10/19/roboto-v-helvetica.
- ↑ Робертсон, Кристиан (2015). «Робото». https://fonts.google.com/specimen/Roboto.
- ↑ «Типография — Стиль». https://material.io/guidelines/style/typography.html.
- ↑ Спрэдлин, Лиам (27 марта 2013 г.). «Внимательно: Google Keep действительно поставляется с новым шрифтом (Serif) — представляем Roboto Slab». http: //www.androidpolice.com / 2013/03/27 / close-look-google-keep-fact-shipped-with-a-new-serif-font-introduction-roboto-slab-download.
- ↑ Персонал (2018-10-18). «Google Keep Notes получил материальный дизайн, шрифт Roboto без засечек и сплошной белый фон» (на английском языке). https://www.bgr.in/news/google-keep-notes-material-design-october-2018-sans-serif-roboto-font-solid-white-background/.
- ↑ Робертсон, Кристиан. «Робото Моно». https://fonts.google.com/specimen/Roboto+Mono.
- ↑ «Еврейский шрифт с открытым исходным кодом Heebo».https://github.com/meirsadan/heebo.
Внешние ссылки
Падение и рост Roboto, шрифта по умолчанию для Android
Легко упустить из виду важность шрифтов в разработке программного обеспечения, особенно когда речь идет о разработке графических пользовательских интерфейсов. К сожалению, даже лучшие из когда-либо созданных шрифтов, включая Helvetica (возможно, самый популярный из когда-либо созданных шрифтов без излишеств), превратились бы в кашу, если бы их сканировали и использовали на компьютерах как есть, как они были созданы для печати.Хорошие графические интерфейсы операционной системы, особенно те, которые используются в смартфонах, требуют шрифтов с плавным изменением размера, удобочитаемыми и привлекательными, независимо от того, используются ли они в крошечных счетчиках заряда батареи или в увеличенных виджетах домашнего экрана; и сделать шрифт, который будет узнаваемым в любом таком масштабе на цифровом экране, больше не является практической невозможностью. Adobe удалось сделать это с помощью семейства шрифтов Source Pro, Apple создала Сан-Франциско, а Google — Google Sans и Roboto. Что еще более похвально, так это то, что последний постепенно стал фаворитом как у любителей, так и у профессионалов, поскольку его разносили повсюду, от журналов до рекламных щитов, из-за его свободного характера.
Введение и первоначальный сбой
Когда Google впервые представила Roboto еще в 2011 году вместе с языком дизайна Holo с Android 4.0 Ice Cream Sandwich, бесплатные шрифты были в основном шуткой. Большинство из них были бы любительскими или заброшенными профессиональными проектами или адаптациями популярных печатных шрифтов, и они часто имели тот или иной недостаток, который нарушал бы функциональность любого проекта, в котором они использовались. Roboto не был исключением. Что еще хуже, несмотря на то, что Google и Кристиан Робертсон (ведущий дизайнер Roboto) хотели, чтобы общественность поверила, шрифт почти не имел собственного характера и получил критику со стороны многих типографических журналов и гигантов.Например, Мирко Гумберт из Typography Daily отлично осветил это в своей статье о Roboto.
Что касается Roboto, Google часто обвиняли в копировании классических шрифтов, таких как Helvetica, DIN и Univers — гарнитуры, которые можно найти на улицах почти везде, куда бы вы ни пошли. Также стоит отметить, что основной конкурент Android в то время, iOS, использовал модифицированную версию Helvetica (Neue) для обработки текста. Несмотря на незначительные разногласия, Android продолжал использовать эту версию Roboto в качестве основного системного шрифта вплоть до Android 4.4 KitKat, который станет последним крупным выпуском, в котором будет использоваться тема Holo. То, что было дальше, во многом изменило правила игры, и одним из них было обращение с Roboto.
Материальный дизайн и «Робото 2014»
В ответ на первоначальную критику Робертсон объявил Робото «незавершенным» и вернулся к чертежной доске. С выпуском Android 5.0 Lollipop Google представила свой новый язык дизайна под названием Material Design, который станет синонимом всех видов графических интерфейсов на Android.Частью этого капитального ремонта стал доступный и геометрический шрифт, способный передавать большой объем информации в небольшом пространстве, и в этом сыграла роль полностью обновленная версия Roboto.
Образец изображения из блога разработчиков Google, демонстрирующий различия между старой версией Roboto и версией 2014 года.
Эта версия Roboto была свежей: у нее была собственная отличная визуальная идентичность, она выглядела впечатляюще как на экране, так и в печати, а ее исходный код был опубликован вместе с лицензией на бесплатное коммерческое использование.То, что, например, когда-то критиковалось за бессовестное копирование заглавной буквы R в Helvetica, теперь имело собственный уникальный символ R. Roboto теперь также имел высокую плотность информации, то есть глифы были читаемыми, но достаточно узкими, чтобы формировать больше слов в заданной области экрана, чем у большинства других шрифтов. Вскоре новый Roboto стал характерной чертой операционной системы Android и других программных проектов Google: изящный вариант Thin украшает экран блокировки ОС, вариант Light поддерживает многие интерфейсы сторонних приложений и темы слоев, а более удобный вариант Regular является найдено в другом месте.Также были выпущены два новых семейства общего шрифта: Roboto Condensed с еще большей плотностью информации, предназначенной для использования с небольшими элементами пользовательского интерфейса и носимыми устройствами, и Roboto Slab для более книжного восприятия читаемости исходного шрифта.
Наряду с принятием этого нового шрифта возросла популярность таких сервисов, как Google Fonts и Font Squirrel, платформ, которые предлагали полностью бесплатные файлы шрифтов для личных и коммерческих целей, поскольку дизайнеры начали загружать больше высококачественных шрифтов по лицензиям с открытым исходным кодом. отчасти воодушевленные успехом Робертсона в создании бесплатного шрифта, который подорвал часто дорогую индустрию типографики.Вскоре даже самые опытные дизайнеры обнаружили, что используют Roboto с файлами собственных шрифтов как для цифровых, так и для печатных целей.
Android Pie и выше
С Android 9.0 Pie Google начал заменять определенные текстовые элементы в графическом интерфейсе Android на Google Sans, модифицированную версию продукта Google Sans, ориентированного на брендинг. В отличие от Roboto, Google Sans является проприетарным и не может использоваться в каких-либо сторонних проектах, кроме тех, которые развернуты в операционной системе Android.В то время как Google Sans имеет еще более дружелюбное и более геометрическое поведение, вариант Roboto Regular по-прежнему используется в качестве основного шрифта для чего-либо, кроме заголовков, во всей ОС из-за плохой читаемости первого шрифта при меньших размерах и отсутствия четкого различия между глифами.
Сравнение Roboto, Roboto Condensed и Google Sans. Обратите внимание на отсутствие различий между глифами L в нижнем регистре и символами I в верхнем регистре.
И сейчас, когда Android 10 активно продвигает универсальную доступность и простоту использования, компактный и удобный для чтения шрифт, такой как Roboto, продолжает оставаться лучшим вариантом, который Google предлагает для шрифтов для графического интерфейса операционной системы.И все же Google, похоже, медленно заменяет его на Google Sans с каждой новой версией ОС и темы материалов, вызывая еще больше критики со стороны пользователей за язык дизайна, который многие считают сломанным.