Вставить шрифт Ubuntu на любую веб-страницу

Ответы:

25

Есть 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 , а затем:

  1. Откройте Google Font Directory: страница « Ubuntu - Использовать этот шрифт »
  2. Отметьте комбинацию весов и стилей из обычного, курсивного, полужирного и полужирного курсива, которые вам нужны для вашей веб-страницы.

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

  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>
    

Примечания :

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

«Подмножество» оптимизирует файлы шрифтов, отправляя символы только для определенных языков, каждый из них занимает около 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 для точных условий о том, как можно распространять шрифт.

dv3500ea
источник
@ DKuntz2 - это действительно лучше; Теперь я изменил свой ответ.
dv3500ea
Не понял необходимости копировать ответ Сладена. Почему бы просто не отредактировать это?
Папукайя,
Я ответил на этот вопрос задолго до sladen, описав метод @ font-face. Это было до того, как шрифт был добавлен в Google Font API (это лучший метод). Я добавил только короткую заметку в начало своего ответа, и Сладен ответил гораздо более полно и получил лучший ответ для использования метода Google.
dv3500ea
1
Однако в то время мой ответ был принят и получил высокую оценку, и в результате люди могли подумать, что им следует использовать метод @ font-face, который менее предпочтителен. Sladen связался со мной по электронной почте об этом, и я согласился изменить свой ответ, указав атрибуцию, как того требует лицензия Creative Commons этого сайта.
dv3500ea
10

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

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

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

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

Примечания:

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

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

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

Сладен
источник
8

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

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

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

CSS2.1 сделал некоторые улучшения с помощью объявления правила @ font-face .
Это еще не стало стандартом, но в конечном итоге это будет с CSS3.

Кроме того, было несколько альтернативных методов, таких как:

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

Павлос Г.
источник