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

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



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



Я скачал файл, который имеет структуру папок, как это:



enter image description here



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




  1. у меня есть css в моем media/css/main.css url. Так куда мне нужно положить эту папку?

  2. мне нужно, чтобы извлечь все eot, svg и т. д. Из всех вложенных папок и положить в ?

  3. нужно ли мне создавать шрифты css-файлов.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

1387   10  

10 ответов:

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

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

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

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

180  
2018-06-08 12:31:18

есть два подхода что вы можете взять, чтобы использовать лицензированные веб-шрифты на ваших страницах:


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

    JS загрузчики шрифтов, как тот, который используется Google и Typekit (т. е. webfont loader) обеспечивают классы 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. в Подход DIY включает в себя получение шрифта, лицензированного для использования в интернете, и (необязательно) использование такого инструмента, как генератор 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 дает наилучший результат в отношении общей производительности, совместимости и доступности.

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

обновление

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

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

50  
2016-03-03 06:30:08

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

Это также возможно с помощью 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;
}
13  
2018-06-28 09:56:21

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

The .. идет одна папка вверх, что означает, что вы имеете в виду media папка если основной.css находится в .

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

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

у меня есть css в моем media/css/main.CSS и URL-адрес. Так куда же мне нужно положить эту папку

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

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

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

нужно ли мне создавать шрифты css-файлов.css и включить в мой базовый файл шаблона

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

вот пример файла fonts 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"; в моей основной.меньше файла (less-это CSS препроцессор, это делает такие вещи немного проще)

3  
2013-08-12 06:01:02

использовать /шрифты/ или / 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  
2016-04-06 14:55:00

искал долгое время для этого, но эта страница настолько удивительна. Просто следуйте инструкциям на нем, и у вас есть собственное лицо шрифта для roboto. Это так просто!!!!

http://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin

1  
2018-04-25 14:49:22

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

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

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
0  
2013-08-12 05:56:00

легко

каждая папка из тех, которые вы загрузили имеет другой вид шрифта 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  
2013-08-12 06:02:16

попробуй такое

<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>
0  
2014-04-16 09:21:43 
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;
}
0  
2018-06-29 11:09:20

Comments

    Ничего не найдено.
Click here to cancel reply.