我正在與一個CMS,我只有訪問CSS文件。所以,我不能在& lthead & gt文檔的。我想知道是否有辦法從CSS文件中導入web字體?
使用@import方法:
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
顯然,“開放Sans”(開放+Sans)是導入的字體。所以換成你的吧。如果字體名稱有多個單詞,就像我做的那樣,通過在每個單詞之間加一個+號來進行URL編碼。
確保將@import放在CSS的最頂端,任何規則之前。
谷歌字體可以自動為你生成@import指令。選擇字體后,點按它旁邊的(+)圖標。在左下角,將出現一個標題為“選擇1個族”的容器。點擊它,它就會展開。使用“自定義”選項卡選擇選項,然后切換回“嵌入”,點擊“嵌入字體”下的“@導入”。復制& ltstyle & gt標簽添加到樣式表中。
最好不要用@import。只需在布局的頭部使用link元素,如上所示。
下載字體TTF/其他格式文件,然后簡單地添加這個CSS代碼示例:
@font-face { font-family: roboto-regular;
src: url('../font/Roboto-Regular.ttf'); }
h2{
font-family: roboto-regular;
}
將以下代碼添加到您的CSS文件中,以導入Google Web字體。
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
用您的字體名稱替換Open+Sans參數值。
您的CSS文件應該類似于:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
font-family: 'Open Sans',serif;
}
除了以上的答案,也請考慮這個網站; https://google-webfonts-helper.herokuapp.com/fonts
主要優勢:
允許你自托管那些谷歌字體,以獲得更好的響應時間 其他優勢:
選擇您的字體 選擇您的字符集 選擇您的字體樣式/粗細 選擇你的目標瀏覽器(現代首選) u獲取css代碼片段(添加到CSS樣式表中)和一個包含在項目文件夾中的字體文件的zip文件(比如css_fonts) 在文件“your_css_theme.css”中添加
/* open-sans-regular - latin - modern browsers */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local(''),
url('css_fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('css_fonts/open-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
body {
font-family: 'Open Sans',sans-serif;
}
使用標簽@import
@import url('http://fonts.googleapis.com/css?family=Kavoon');
您也可以使用@font-face鏈接到URL。 http://www.css3.info/preview/web-fonts-with-font-face/
CMS支持iframes嗎?您也可以將iframe放在內容的頂部。這可能會慢一些——最好把它包含在你的CSS中。
要選擇字體,你可以訪問鏈接:https://fonts.google.com
從網站上寫出你選擇的字體名稱,不包括括號。
比如你選擇了龍蝦作為你的字體,
<link rel="stylesheet"
type="text/css">
然后你就可以在你的整個HTML/CSS文件中使用這個字體系列。
例如
<h2 style="Lobster">Please Like This Answer</h2>
只需通過鏈接
https://developers.google.com/fonts/docs/getting_started
要將其導入樣式表,請使用
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
自2015年以來,谷歌方面發生了一些變化..我很難找到包含新方法的方法:
向下滾動所需的字體頁面 單擊字體名稱旁邊的小加號圖標 嵌入鏈接和其他選項將出現在& quot選定的家庭& quot網頁右邊的對話。 我們可以在css3中輕松做到這一點。我們必須簡單地使用@import語句。下面的視頻簡單描述了如何做到這一點。所以繼續看著吧。
https://www.youtube.com/watch? v = wlpr 6 ef 6 Gao
前往https://fonts.google.com/,選擇您想要的字體系列(您可以按名稱搜索):
選擇所需的變體(粗細、斜體等。):
單擊右上角的查看所選系列按鈕:
選擇右側面板上的@import獲取代碼:
這里的每個人都用鏈接標簽和@import給出了答案。如果你在做你的項目(html,css)的時候有互聯網連接,那就很好了。但是如果你想通過下載來使用你的字體,請遵循以下步驟
使用下載全部選項從谷歌字體網站下載所需字體的zip文件。 解壓縮zip文件,您將獲得您的。ttf文件。 在styles.css中使用- @font-face{ font-family:.......;src:url(........);} * *在font-family中寫入您想要使用的字體名稱。ttf文件。打開那個就能找到名字。ttf文件。
內部網址提及你的本地路徑。ttf文件。**
如果你想用你的字體。 簡單地使用font-family屬性,并在其中寫入上一步中使用的字體名稱(使用opening得到的名稱)。ttf文件) 如果您想將此字體添加到整個網頁,請使用通用選擇器(*)中的字體系列屬性。