Есть 2 способа, с помощью которых вы можете встроить шрифт Ubuntu на свой веб-сайт - с помощью Google Font Directory (предпочтительно) или с @font-faceпомощью декларации CSS и конвертации ваших шрифтов вручную.
Использование Google Webfonts
Теперь вы можете использовать шрифт Ubuntu в качестве веб-шрифта Google. Это сделает процесс намного проще. Большая часть содержания этой части ответа взята из ответа Сладена .
Почему использование Google Font API является предпочтительным методом?
Использование Google Font API является отличным предложением, поскольку позволяет веб-шрифтам автоматически работать во всех современных браузерах, не беспокоясь о деталях. Использование API шрифтов означает, что посетители всегда будут видеть последнюю версию гарнитуры автоматически.
Как я могу использовать Google Font API?
С 21 декабря 2010 года семейство шрифтов Ubuntu теперь включено и может быть развернуто из Google Font API, посетите:
Вы можете прочитать сообщение о новостях в Google Web Font , а затем:
- Откройте Google Font Directory: страница « Ubuntu - Использовать этот шрифт »
Отметьте комбинацию весов и стилей из обычного, курсивного, полужирного и полужирного курсива, которые вам нужны для вашей веб-страницы.
Если значение по умолчанию неверно, выберите нужную комбинацию языка / сценария : русский сайт с примерами на английском языке может использовать «кириллица, латиница».
Добавьте указанный <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>
Примечания :
«Латиница» - это сценарий, на котором написаны английский и многие другие европейские и африканские языки.
«Подмножество» оптимизирует файлы шрифтов, отправляя символы только для определенных языков, каждый из них занимает около 44 КБ. Показанный в данный момент размер 168 КБ предназначен для всех 1 200+ символов, загружаемых одним веб-шрифтом, и большинство из них не требуется для одного веб-сайта.
Файлы шрифтов Ubuntu автоматически конвертируются в правильный формат для разных браузеров; в зависимости от марки и версии требуемый формат WOFF, EOT, SVGили TTF. Правильная комбинация CSS специфична для каждого запроса страницы и волшебным образом решает эту сложную проблему.
Использование @ font-face
Вы можете встроить шрифты Ubuntu, преобразовав их в шрифты WOFF . Затем вы можете встроить их, используя декларацию CSS @ font-face. Шрифты (файлы .ttf) можно найти в /usr/share/fonts/truetype/ubuntu-font-family.
Например, для использования обычного шрифта Ubuntu, преобразованного в файл UFF 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 Italic:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-I.woff');
font-style : italic;
}
Ubuntu Bold Italic:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-BI.woff');
font-weight : bold;
font-style : italic;
}
Это поддерживается всеми последними браузерами .
Соображения
Помните, что некоторые пользователи настраивают свои браузеры на использование определенного набора шрифтов, и это может раздражать, если используются пользовательские шрифты. Кроме того, прочтите Ubuntu Font License для точных условий о том, как можно распространять шрифт.
Использование Google Font API является отличным предложением, поскольку позволяет веб-шрифтам автоматически работать во всех современных браузерах, не беспокоясь о деталях. Использование API шрифтов означает, что посетители всегда будут видеть последнюю версию гарнитуры автоматически.
С 21 декабря 2010 года семейство шрифтов Ubuntu теперь включено и может быть развернуто из Google Font API, посетите:
Вы можете прочитать сообщение о новостях в Google Web Font , а затем:
<head> ... </head>и<style>...</style>разделы страницы HTML или шаблонов.Примечания:
«Латиница» - это сценарий, на котором написаны английский и многие другие европейские и африканские языки.
«Подмножество» оптимизирует файлы шрифтов, отправляя символы только для определенных языков, размер шрифта составляет около 44 КБ каждый. Показанный в данный момент размер 168 КБ предназначен для всех 1 200+ символов, загружаемых одним веб-шрифтом, и большинство из них не требуется для одного веб-сайта.
Файлы шрифтов Ubuntu автоматически конвертируются в правильный формат для разных браузеров; в зависимости от марки и версии требуемый формат
WOFF,EOT,SVGилиTTF. Правильная комбинация CSS специфична для каждого запроса страницы и волшебным образом решает эту сложную проблему.источник
Рендеринг шрифтов на стороне сервера (возможно, лучше «динамический рендеринг шрифтов») был интересной проблемой в течение достаточно долгого времени.
Технически кажется логичным, что для того, чтобы компьютер отображал определенный шрифт, он должен быть уже установлен локально.
С другой стороны, веб-дизайн много теряет, придерживаясь основных / известных «веб-шрифтов».
CSS2.1 сделал некоторые улучшения с помощью объявления правила @ font-face .
Это еще не стало стандартом, но в конечном итоге это будет с CSS3.
Кроме того, было несколько альтернативных методов, таких как:
Я надеюсь, что предоставленные ссылки дадут вам лучшее представление о том, что можно сделать ;-)
источник