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

165

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

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

Я скачал файл с такой структурой папок:

введите описание изображения здесь

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

  1. У меня есть CSS в моем media/css/main.cssURL. Так, где я должен поместить эту папку?
  2. Нужно ли мне извлекать все eot, svg и т. Д. Из всех подпапок и помещать в fontsпапку?
  3. Нужно ли создавать 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

html  css  fonts 
— user26
источник

Ответы:

259

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

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

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

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

— Сунил Гарг
источник
Спасибо за это, это было прекрасно. Знаете ли вы, какие настройки Google использует для своих шрифтов плейлистов в магазине Google Play. я хочу, чтобы стиль был именно таким. Также я не нашел ссылку или фрагмент кода в ссылке. я вижу там шрифты, но без кода
— user26
3
Классная вещь, они также предоставляют @import для файлов LESS! Тем не менее, тестирование без подключения к Интернету ИЛИ проблемы с подключением к Google (например: Китай) = НЕТ шрифтов ... Я также заметил, что Roboto Black (Roboto Bk) нет font-family: они на самом деле используют только 3 семейства шрифтов (Roboto, Roboto Condensed и Roboto Slab) все другие варианты Roboto сделаны через font-styleи font-weightизменения CSS. Так что в идеале после размещения в гугле <link>проверьте, действительно ли шрифты есть. Если нет, используйте свой собственный (кстати, загрузка всех файлов из одного семейства шрифтов обычно не превышает 0,5 МБ).
— Armfoot
7
@ user26 Загружает <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900' rel='stylesheet' type='text/css'>все стили только из одного семейства шрифтов: Roboto. Однако, если вам нужно семейство шрифтов, отсутствующее в Google Fonts (например, Roboto Black ), вам нужны файлы в ваших папках и скопируйте пример кода, который вы показали нам в своем вопросе, в свой main.css (как это @font-face{font-family: 'Roboto Black';src:url('/media/fonts/roboto/roboto_black_macroman/blablabla.eot; ...etc.или как я предложил в мой ответ).
— Armfoot
14
-1 за Using Google's fonts this way guaranties availability. Ничто не «гарантирует доступность», а тем более шрифты Google. Я оказался одним из миллиарда людей, для которых использование CDN Google означает, что тонны веб-сайтов не загружаются должным образом или вообще не загружаются. Я никому не говорю, что делать, но не думаю, что CDN от Google - идеальное решение.
— Nateowami
1
-1. Как упомянул @Nateowami, вы полагаетесь на серверы Google (которые могут быть заблокированы в некоторых странах), это плохо сказывается на конфиденциальности , и производительность может на самом деле быть лучше, если вы разместите свои шрифты в CDN самостоятельно. Это больше работы, но это твоя работа, не так ли?
— Робин Метрал
72

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

  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>
  1. Подход «сделай сам» включает в себя получение шрифта, лицензированного для веб-использования, и (опционально) использование инструмента, такого как генератор FontSquirrel (или некоторое программное обеспечение), для оптимизации размера его файла. Затем кросс-браузерная реализация стандартного @font-faceсвойства CSS используется для включения шрифта (-ов).

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

    /* 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: подписной шрифт Google теперь с открытым исходным кодом

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

— Ашеш Кумар Сингх
источник
17

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

Это также возможно с помощью 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;
}
— Rock Steady
источник
8
Ваше решение - это анти-шаблон производительности. Использование тега ссылки в разметке приводит к более быстрой загрузке CSS-файла Google по сравнению с @import; браузер просто обнаруживает ссылку на ресурс ранее вообще и, в частности, из-за предварительного загрузчика (при анализе HTML вместо анализа сначала HTML, затем найдите ваш CSS файл, затем загрузите его, затем проанализируйте и обнаружите @import, затем скачать импортированную таблицу стилей).
— Радько Динев,
3
Не обязательно. Используя Webpack и плагины, все это будет встроено в ваш дистрибутив.
— Спок
6

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 в моем media / 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 ( less - это препроцессор CSS, это немного упрощает подобные вещи )

— Armfoot
источник
2

Это то, что я сделал, чтобы получить файлы woff2, которые я хотел для статического развертывания, без использования CDN

ВРЕМЕННО добавьте cdn для css, чтобы загрузить шрифты робота в index.html, и дайте странице загрузиться. из google dev tools просмотрите источники, разверните узел fonts.googleapis.com и просмотрите содержимое css? family = Roboto: 300 400 500 & display = файл подкачки и скопируйте его. Поместите это содержимое в файл CSS в вашем каталоге ресурсов.

В файле css удалите все греческие, вьетнамские и вьетнамские ноты.

Посмотрите на строки в этом файле CSS, которые похожи на:

    src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');

скопируйте адрес ссылки и вставьте его в браузер, он скачает шрифт. Поместите этот шрифт в вашу папку ресурсов и переименуйте его здесь, а также в файл CSS. Сделайте это с другими ссылками, у меня было 6 уникальных файлов woff2.

Я следовал тем же шагам для материальных иконок.

Теперь вернитесь и прокомментируйте строку, в которой вы вызываете cdn, и используйте вместо нее новый созданный вами файл css.

— Helzgate
источник
1

Попробуй это

<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>
— Ведущий разработчик
источник
1

Используйте / 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;

}
— Мохаммед Джавед
источник
1

Для веб-сайта вы можете использовать шрифт «Roboto», как показано ниже:

Если вы создали отдельный файл CSS, то поместите нижнюю строку вверху файла CSS как:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

Или, если вы не хотите создавать отдельный файл, добавьте указанную выше строку между <style>...</style>:

<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

затем:

html, body {
    font-family: 'Roboto', sans-serif;
}
— Мистер никто
источник
0

Вы читали How_To_Use_Webfonts.html, который находится в этом файле zip?

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

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
— Барри Колебанк-младший
источник
0

это просто

каждая папка из тех, что вы скачали, имеет свой вид шрифта робото, это означает, что это разные шрифты

пример: "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';

— Омар Мустафа
источник
0

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

0

Потратил час, исправляя проблемы со шрифтами.

Связанный ответ - ниже для React.jsвеб-сайта:

  1. Установите модуль npm:

    npm install --save typeface-roboto-mono

  2. импортировать в файл .js вы хотите использовать
    один из следующих :

    import "typeface-roboto-mono"; // если импорт поддерживается
    require('typeface-roboto-mono') // если импорт не поддерживается

  3. Для элемента вы можете использовать
    один из следующих:

    fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
    font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
    style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/

Надеюсь, это поможет.

— Манохар Редди Поредди
источник
0

С помощью css:

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* etc, etc. */

С sass:

  @font-face
    font-family: 'Roboto'
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype')
    font-weight: normal
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype')
    font-weight: bold
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype')
    font-weight: normal
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype')
    font-weight: bold
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype')
    font-weight: 300
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype')
    font-weight: 300
    font-style: italic

  @font-face
    font-family: 'Roboto'
    src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype')
    font-weight: 500
    font-style: normal

  @font-face
    font-family: 'Roboto'
    src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype')
    font-weight: 500
    font-style: italic

/* Roboto-Regular.ttf       400 */
/* Roboto-Bold.ttf          700 */
/* Roboto-Italic.ttf        400 */
/* Roboto-BoldItalic.ttf    700 */
/* Roboto-Medium.ttf        500 */
/* Roboto-MediumItalic.ttf  500 */
/* Roboto-Light.ttf         300 */
/* Roboto-LightItalic.ttf   300 */

/* https://fonts.google.com/specimen/Roboto#standard-styles */
— intika
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.