我想在我的網站上使用谷歌的Roboto字體，我正在遵循這個教程:
http://www . make tech easy . com/use-Google-roboto-font-everywhere/2012/03/15
我已經下載了一個文件夾結構如下的文件:
現在我有三個問題:
我的media/css/main.css url中有css。那么我需要把那個文件夾放在哪里呢？ 我需要從所有子文件夾中提取所有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應該是什么樣的，如果我想讓目錄結構像這樣:
/媒體/字體/機器人
你真的不需要做這些。
去谷歌的網頁字體頁面 在右上角的搜索框中搜索Roboto 選擇您想要使用的字體變體 點擊頂部的“選擇該字體”,選擇您需要的字體粗細和字符集。 頁面會給你一個& ltlink & gt元素，以及要在CSS中使用的字體系列規則示例列表。
以這種方式使用谷歌字體保證了可用性，并減少了你自己服務器的帶寬。
有兩種方法可以讓你在網頁上使用授權的網絡字體:
1.字體托管服務，如Typekit、Fonts.com、Fontdeck等。 這些服務為設計者提供了一個簡單的界面來管理購買的字體，并生成一個鏈接到提供字體的動態CSS或JavaScript文件。谷歌甚至免費提供這項服務(這里有一個你要求的Roboto字體的例子)。
像Google和Typekit使用的JS字體加載器(即WebFont loader)提供CSS類和回調來幫助管理可能發生的FOUT或下載字體時的響應超時。
<head>
<!-- get the required files from 3rd party sources -->
<link rel='stylesheet' type='text/css'>
<!-- use the font -->
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 48px;
}
</style>
</head>2.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;
}TLDR；
有兩種主要的方法可以在你的網站上嵌入自定義字體。使用字體托管服務和@font-face聲明可以在整體性能、兼容性和可用性方面提供最佳輸出。
來源:https://www . artz studio . com/2012/02/we B- font-performance-weighting-font face-options-and-alternatives/
更新
Roboto:谷歌的簽名字體現在已經開源了。您現在可以使用此處的說明手動生成Roboto字體。
舊帖子，我知道。
使用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;
}src直接引用字體文件，因此，如果您將它們全部放在/media/fonts/roboto上，您應該在main.css中引用它們，如下所示: src: url('../fonts/Roboto/Roboto-thin italic-web font . eot ')；
這..上移一個文件夾，這意味著如果main.css在/media/css文件夾中，則您指的是media文件夾。
你必須使用../fonts/roboto/
基本上(回答你的問題):
我的media/css/main.css url中有css。那么我需要把那個文件夾放在哪里呢
您可以把它留在那里，但是一定要使用src: url('../fonts/roboto/
我需要從所有子文件夾中提取所有eot、svg等文件并放入fonts文件夾嗎
如果您想直接引用這些文件(而不將子目錄放在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“字體”；在我的main.less文件中(less是一個CSS預處理器，它使這類事情變得簡單了一點)
對于網站，您可以使用如下“Roboto”字體:
如果你已經創建了一個單獨的css文件，那么在css文件的頂部加上下面一行:
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');或者，如果您不想創建單獨的文件，請在中間添加上面的行& ltstyle & gt...& lt/style & gt；：
<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;
}這就是我在不使用CDN的情況下獲得靜態部署所需的woff2文件的方法
臨時為css添加cdn以將roboto字體加載到index.html并讓頁面加載。 從谷歌開發工具看源代碼，并展開fonts.googleapis.com節點，查看css的內容？家庭=機器人:300，400，& ampdisplay =交換文件并復制內容。將這些內容放在assets目錄下的css文件中。
在css文件中，刪除所有的希臘，愛爾蘭和越南的東西。
查看這個css文件中類似于以下內容的行:
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');復制鏈接地址并粘貼到你的瀏覽器中，它將下載字體。把這個字體放到你的assets文件夾中，在這里重新命名，在css文件中也一樣。這樣做的其他鏈接，我有6個獨特的woff2文件。
對于材質圖標，我遵循了相同的步驟。
現在返回并注釋調用cdn的那一行，改為使用您創建的新css文件。
試試這個
<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>在CSS樣式表中的字體類型名稱前使用/fonts/或/font/我面臨這個錯誤，但之后它的工作很好。
@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;
}這很簡單
你下載的每一個文件夾都有不同的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 '；
其實挺簡單的。轉到谷歌網站上的字體，并將其鏈接添加到您想要包含該字體的每個頁面的標題上。
你讀過那個壓縮文件里的How_To_Use_Webfonts.html嗎？
看完之后，似乎每個字體子文件夾都有一個已經創建的。你可以通過包含以下內容來使用css:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />花了一個小時，修復字體問題。
相關回答-以下為React.js網站:
安裝npm模塊:
npm安裝-保存字體-機器人-mono
導入進來。您要使用的js文件 以下之一:
導入“字樣-roboto-mono”；//如果支持導入 require(' typeface-roboto-mono ')//如果不支持導入
對于可以使用的元素 以下之一:
fontFamily: "Roboto Mono，Menlo，Monaco，Courier，monospace", // material-ui 字體系列:Roboto Mono，Menlo，Monaco，Courier，monospace/* css */ style="font-family:Roboto Mono，Menlo，Monaco，Courier，monospacefont-weight:300；"/*內嵌css*/
希望有幫助。