☰

Использование веб-шрифтов Google

tag-icon • tag-icon websites license ubuntu-font-family
Использование веб-шрифтов Google

Рассматриваем такие лицензии как:

как я могу использовать семейство шрифтов Ubuntu на любом веб-сайте, не заставляя пользователя устанавливать его?
Есть ли возможность использовать его с такими инструментами, как:http://code.google.com/intl/en-US/apis/webfonts/

решение1

Существует два способа встроить шрифт Ubuntu на свой веб-сайт: с помощью каталога шрифтов Google (предпочтительнее) или с помощью @font-faceдекларации CSS и ручного преобразования шрифтов.

Использование веб-шрифтов Google

Теперь вы можете использовать шрифт Ubuntu как веб-шрифт Google. Это значительно упростит процесс. Большая часть содержания этой части ответа взята изответ слэйдена.

Почему использование Google Font API является предпочтительным методом?

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

Как использовать API шрифтов Google?

С 21 декабря 2010 года семейство шрифтов Ubuntu включено и может быть развернуто через API шрифтов Google, посетите:

Ты можешь читатьразмещение Google Web Fontо новостях, а затем:

  1. Откройте каталог шрифтов Google: "Ubuntu — используйте этот шрифт" страница

  2. Отметьте комбинациювеса и стилииз начертаний Regular, Italic, Bold и Bold-Italic, которые вам нужны для вашей веб-страницы.

    альтернативный текст

  3. Если значение по умолчанию неверно, выберитесочетание языка и письменностивам нужно: русский сайт с примерами на английском может использовать «кириллица,латиница».

    альтернативный текст

  4. Добавьте указанный <link>тег между тегами <head> ... </head>на вашей HTML-странице или в шаблонах, а также добавьте соответствующий CSS-код между <style> ... </style>тегами в вашем <head>.

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

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
    body {
        font-family : 'Ubuntu', sans-serif;
    }
</style>

Примечания:

«Латинский» — этосценарийна котором написаны английский и многие другие европейские и африканские языки.

«Subsetting» оптимизирует файлы шрифтов, отправляя только символы для определенных языков, шрифты имеют размер около 44 КБ каждый. Цифра в 168 КБ, показанная на данный момент, относится ко всем 1200+ глифам как единой загрузке веб-шрифта — и большинство из них не нужны для одного веб-сайта.

Файлы шрифтов Ubuntu автоматически конвертируются в правильный формат для разных браузеров; в зависимости от марки и версии требуемый формат — WOFF, EOT, SVGили TTF. Правильная комбинация CSS специфична для каждого запроса страницы и волшебным образом решает эту сложную проблему.

Использование @font-face

Вы можете встроить шрифты Ubuntu с помощьюпреобразуя ихкWOFF-шрифты. Затем вы можете встроить их с помощью CSS-декларации @font-face. Шрифты (файлы .ttf) можно найти в /usr/share/fonts/truetype/ubuntu-font-family.

Например, чтобы использовать шрифт Ubuntu Regular, преобразованный в файл WOFF, Ubuntu-R.woff, используйте этот код CSS:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

Аналогично для Ubuntu Bold:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Курсив Ubuntu:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu полужирный курсив:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

Это поддерживают всепоследние браузеры.

Соображения

Пожалуйста, помните, что некоторые пользователи настраивают свои браузеры на использование определенного набора шрифтов и могут быть раздражены, если используются пользовательские шрифты. Также прочитайтеЛицензия шрифта Ubuntuдля получения точных условий распространения шрифта.

решение2

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

С 21 декабря 2010 года семейство шрифтов Ubuntu включено и может быть развернуто через API шрифтов Google, посетите:

Ты можешь читатьразмещение Google Web Fontо новостях, а затем:

  1. Откройте каталог шрифтов Google: "Ubuntu — используйте этот шрифт" страница
  2. Отметьте комбинациювеса и стилииз начертаний Regular, Italic, Bold и Bold-Italic, которые вам нужны для вашей веб-страницы.
  3. Если значение по умолчанию неверно, выберитесочетание языка и письменностивам нужно: русский сайт с примерами на английском может использовать «кириллица,латиница».
  4. Скопируйте и вставьтедве строки CSSв разделы <head> ... </head>и <style>...</style>вашей HTML-страницы или шаблонов.

Примечания:

«Латинский» — этосценарийна котором написаны английский и многие другие европейские и африканские языки.

«Subsetting» оптимизирует файлы шрифтов, отправляя только символы для определенных языков, шрифты имеют размер около 44 кБ каждый. Цифра в 168 кБ, показанная на данный момент, относится ко всем 1200+ глифам как единой загрузке веб-шрифта — и большинство из них не нужны для одного веб-сайта.

Файлы шрифтов Ubuntu автоматически конвертируются в правильный формат для разных браузеров; в зависимости от марки и версии требуемый формат — WOFF, EOT, SVGили TTF. Правильная комбинация CSS специфична для каждого запроса страницы и волшебным образом решает эту сложную проблему.

решение3

Рендеринг шрифтов на стороне сервера (или, возможно, более точный «динамический рендеринг шрифтов») уже давно является интересной проблемой.

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

С другой стороны, веб-дизайн многое теряет, если ему приходится придерживаться базовых/общеизвестных «веб-шрифтов».

CSS2.1 внес некоторые улучшения, используя@шрифт-faceправилодекларация.
Это пока не стало стандартом, но со временем станет им с появлением CSS3.

Помимо этого, существует несколько альтернативных методов, таких как:

Надеюсь, предоставленные ссылки дадут вам лучшее представление о том, что можно сделать ;-)

Связанный контент