it-swarm.com.ru

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

Учитывая лицензии как:

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

16
takeshin

Есть 2 способа, с помощью которых вы можете встроить шрифт Ubuntu на свой веб-сайт - с помощью Google Font Directory (предпочтительно) или с помощью объявления CSS @font-face и конвертируя свои шрифты вручную.

Использование Google Webfonts

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

Почему использование 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. Отметьте комбинацию весов и стилей из обычного, курсивного, полужирного и полужирного курсива, которые вам нужны для вашей веб-страницы.

    alt text

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

    alt text

  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;
}

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

Соображения

Помните, что некоторые пользователи настраивают свои браузеры на использование определенного набора шрифтов, и это может раздражать, если используются пользовательские шрифты. Кроме того, прочитайте buntu Font License для точных условий относительно того, как можно распространять шрифт.

25
dv3500ea

Использование 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 специфична для каждого запроса страницы и волшебным образом решает эту сложную проблему.

10
sladen

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

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

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

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

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

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

8
Pavlos G.