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

15

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

как я могу использовать семейство шрифтов Ubuntu на любом веб-сайте без необходимости его установки?
Любой шанс использовать его с помощью таких инструментов, как: Ссылка

    
задан takeshin 07.12.2010 в 18:52
источник

3 ответа

24

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

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

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

Почему API Google Font API предпочтительнее?

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

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

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

Вы можете прочитать публикацию веб-шрифтов Google новости, а затем:

  1. Откройте каталог шрифтов Google: Ubuntu - используйте этот шрифт "page
  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>
    

Примечания

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

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

Файлы шрифтов Ubuntu автоматически преобразуются в правильном формате для разных браузеров; в зависимости от make и версии требуемый формат: 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 Italic:

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

Ubuntu Bold Курсив:

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

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

Вопросы

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

ответ дан dv3500ea 07.12.2010 в 19:56
источник
10

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

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

Вы можете прочитать публикацию веб-шрифтов Google новости, а затем:

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

Примечания:

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

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

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

    
ответ дан sladen 22.12.2010 в 04:17
8

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

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

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

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

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

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

    
ответ дан Pavlos G. 07.12.2010 в 19:30