Як я можу використовувати шрифт Google Roboto на веб-сайті?

163

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

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

Я завантажив файл із такою структурою папок:

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

Зараз у мене є три питання:

  1. У мене в media/css/main.cssURL- адресі є css . То де мені потрібно помістити цю папку?
  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 
— користувач26
джерело

Відповіді:

257

Вам не потрібно нічого з цього робити.

  • Перейдіть на сторінку веб-шрифтів Google
  • шукайте Robotoу вікні пошуку вгорі праворуч
  • Виберіть варіанти шрифту, який ви хочете використовувати
  • натисніть "Вибрати цей шрифт" вгорі та виберіть необхідні ваги та набори символів.

На цій сторінці ви знайдете <link>елемент, який потрібно включити до своїх сторінок, і список зразкових font-familyправил, які потрібно використовувати у вашій CSS.

Використання шрифтів Google таким чином гарантує доступність та зменшує пропускну здатність до вашого власного сервера.

— Суніл Гарг
джерело
Дякую за це, це було ідеально. Чи знаєте ви, яку настройку Google використовує для своїх шрифтів у списку відтворення у магазині Google Play. я хочу мати стиль саме таким. Крім того, я не знайшов посилання або фрагмент коду у посиланні. я бачу шрифти там, але немає коду
— user26
3
Прикольна річ, вони також надають @import і для менших файлів! Однак тестування без підключення до Інтернету АБО проблем з підключенням Google (наприклад, Китай) = НІ шрифтів ... Я також помітив, що немає Roboto Black (Roboto Bk) font-family: вони фактично використовують лише 3 родини шрифтів (Roboto, Roboto Condensed та Roboto Slab) всі інші варіанти Roboto зроблені через font-styleта font-weightзміни CSS. Тож в ідеалі, після розміщення Google, <link>перевірте, чи справді є шрифти. Якщо ні, використовуйте свій власний (btw завантаження всіх файлів з одного сімейства шрифтів зазвичай не перевищує 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 (наприклад, 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. Це більше роботи, але це ваша робота, чи не так?
— Робін Мітраль
70

Є два підходи, які ви можете скористатися для використання ліцензованих веб-шрифтів на своїх сторінках:

  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 (або якогось програмного забезпечення) для оптимізації розміру файлу. Потім @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;
}
— rocksteady
джерело
8
Ваше рішення - антидіапазон ефективності. Використання тегу посилань у розмітці призводить до швидшого завантаження CSS-файлу Google порівняно з @import; браузер просто виявляє посилання на ресурс раніше, взагалі, зокрема, завдяки попередньому завантажувачу (під час розбору HTML проти першого розбору HTML, потім відкрийте файл CSS, потім завантажте його, потім проаналізуйте та відкрийте @import, потім завантажити імпортовану таблицю стилів).
— Радько Дінев
3
Не обов'язково. Використовуючи Webpack і плагіни, все це буде вбудовано у вашу дистрибутив.
— Спок
5

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.

Ось приклад файлу, який я використовую МЕНШЕ / 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, це робить такі речі трохи простішими )

— Armfoot
джерело
2

Це те, що я зробив, щоб отримати потрібні файли woff2 для статичного розгортання без використання CDN

TEMPORARILY додайте cdn для css, щоб завантажити шрифти roboto в index.html і дозволити завантаженню сторінки. з інструментів google dev перегляньте джерела та розгорніть вузол fonts.googleapis.com та перегляньте вміст css? family = Roboto: 300,400,500 & display = swap file та скопіюйте вміст. Помістіть цей вміст у файл 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.

— Гельцгейт
джерело
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

Використовуйте / шрифти / або / шрифт / перед назвою типу шрифту в таблиці стилів 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, який знаходиться у цьому поштовому файлі?

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

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

це легко

у кожній папці завантажених файлів є різний шрифт 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';

— Омар Мустафа
джерело
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*/

Сподіваюся, що це допомагає.

— Манохар Редді Подді
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.