Как использовать шрифт Google Roboto на веб-сайте?

Я хочу использовать шрифт Google Roboto на своем веб-сайте, и я следую этому руководству:

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

Я загрузил файл с такой структурой папок, как это:

enter image description here

Теперь у меня есть три вопроса:

  • У меня есть css в моем media/css/main.css url. Итак, где мне нужно разместить эту папку?
  • Нужно ли извлекать все eot, svg и т.д. из всех подпапок и помещать в папку fonts?
  • Нужно ли мне создавать css файл fonts.css и включать в мой базовый файл шаблона?

Пример, который он использует для этого

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

Как должен выглядеть мой url, если я хочу, чтобы структура dir выглядела следующим образом:

/media/fonts/roboto

Ответы

Ответ 1

Вам действительно не нужно делать ничего из этого.

  • Перейти на страницу веб-шрифтов Google
  • поиск Roboto в окне поиска в правом верхнем углу
  • Выберите варианты шрифта, который вы хотите использовать
  • нажмите "Выбрать этот шрифт" вверху и выберите нужные вам веса и наборы символов.

Страница предоставит вам элемент <link> для включения в ваши страницы и список примеров правил font-family для использования в вашем CSS.

Использование шрифтов Google таким способом гарантирует доступность и снижает пропускную способность для вашего собственного сервера.

Ответ 2

Существует два подхода к использованию лицензионных веб-шрифтов на ваших страницах:

  1. Службы хостинга шрифтов, такие как Typekit, Fonts.com, Fontdeck и т.д., Предоставляют дизайнерам простой интерфейс для управления приобретенными шрифтами и создания ссылки на динамический файл CSS или JavaScript, который обслуживает шрифт. Google даже предоставляет эту услугу бесплатно (вот пример запрашиваемого вами шрифта Roboto). Typekit - это единственная служба, предоставляющая дополнительную подсказку о шрифтах, чтобы гарантировать, что шрифты занимают одинаковые пиксели в разных браузерах.

    Загрузчики шрифтов JS, такие как используемые Google и Typekit (т.е. Загрузчик WebFont), предоставляют классы CSS и обратные вызовы, помогающие управлять FOUT, который может возникнуть, или временем ожидания ответа при загрузке шрифта.

    <head>
  <!-- get the required files from 3rd party sources -->
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <!-- use the font -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>

  2. Подход "сделай сам" включает в себя получение шрифта, лицензированного для веб-использования, и (опционально) использование такого инструмента, как генератор FontSquirrel (или некоторое программное обеспечение), для оптимизации размера его файла. Затем кросс-браузерная реализация стандартного CSS-свойства @font-face используется для включения шрифта (-ов).

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

    /* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

Короче:

Использование служб размещения шрифтов вместе с объявлением @font-face дает наилучшие результаты в отношении общей производительности, совместимости и доступности.

Источник: https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

ОБНОВИТЬ

Roboto: шрифт подписи Googles теперь с открытым исходным кодом

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

Ответ 3

Старый пост, я знаю.

Это также возможно с помощью CSS @import url:

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}

Ответ 4

src ссылается непосредственно на файлы шрифтов, поэтому, если вы поместите их все на /media/fonts/roboto, вы должны ссылаться на них в своем main.css следующим образом: src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

.. идет одна папка вверх, это означает, что вы ссылаетесь на папку media, если main.css находится в папке /media/css.

Вы должны использовать ../fonts/roboto/ во всех ссылках на URL в CSS (и убедитесь, что файлы находятся в этой папке, а не в подкаталогах, например roboto_black_macroman).

В основном (отвечая на ваши вопросы):

У меня есть css в моем медиа /css/main.css url. Итак, где мне нужно поместить эту папку

Вы можете оставить его там, но обязательно используйте src: url('../fonts/roboto/

Нужно ли извлекать все eot, svg и т.д. из всех подпапок и помещать в папку шрифтов

Если вы хотите напрямую обращаться к этим файлам (не помещая подкаталоги в свой CSS-код), тогда да.

Мне нужно создать файл css fonts.css и включить его в файл базового шаблона

Не обязательно, вы можете просто включить этот код в свой main.css. Но это хорошая практика, чтобы отделять шрифты от настраиваемого CSS.

Вот пример используемого шрифта LESS/CSS:

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

(В этом примере я использую только ttf) Затем я использую @import "fonts"; в моем файле main.less(меньше - препроцессор CSS, он делает такие вещи немного проще)

Ответ 5

Используйте /fonts/ или /font/ перед именем шрифта в вашей таблице стилей CSS. Я сталкиваюсь с этой ошибкой, но после этого работает нормально.

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Ответ 6

For Website you can use 'Roboto' font as below:

**If you have created separate css file then put below line at the top of css file as:**
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

**Or if you don't want to create separate file then add above line in between <style>...</style>:**
<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

**then:**
html, body {
    font-family: 'Roboto', sans-serif;
}

Ответ 7

Вы читали файл How_To_Use_Webfonts.html в этом zip файле?

После прочтения этого, кажется, что каждая подпапка шрифта имеет уже созданный .css, который вы можете использовать, включив это:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

Ответ 8

это легко

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

Пример: "roboto_regular_macroman"

использовать любой из них:

1- извлеките папку шрифта, который вы хотите использовать

2- загрузите его около файла css

3 теперь включите его в файл css

пример для включения шрифта, который называется roboto_regular_macroman:

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

смотрите путь к файлам, здесь я загрузил папку с именем roboto_regular_macroman в той же папке, где css

то теперь вы можете просто использовать шрифт, набрав font-family: 'Roboto';

Ответ 9

Попробуйте это

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>