免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

成都搭建網站服務

2022-07-28    分類: 網站建設

成都搭建網站服務在您的網站上添加獨特的字體是使您的設計脫穎而出的好方法。

在本文中,我將逐步指導您向網站添加任何字體。

注意:由于并非所有網站都是以相同的方式構建和管理的,因此,我將介紹添加自定義字體的最通用的方法,然后說明最受歡迎的網站構建平臺如何支持自定義字體。

內容:

網絡上可以使用什么字體?
不同的字體格式和瀏覽器支持
如何使用@ font-face添加自定義字體(CSS規則)
內容管理系統如何支持自定義字體
網站建設者如何支持自定義字體
網絡上可以使用什么字體?
從技術上講,您幾乎可以將任何字體添加到任何網站。

但是,在聯機搜索字體時,您始終要牢記價格,  許可協議和安裝方法。

事不宜遲,以下是一些最受歡迎的字體庫,可幫助您找到理想的字體:

Google字體(免費)
Google字體擁有令人印象深刻的庫,其中包含將近1000種免費許可證字體,可以通過其交互式Web目錄進行瀏覽。由于  開發者API的存在,可以說Google字體是最容易添加到您的網站以及我建議您開始搜索的字體。

相關:  最受歡迎的20種最流行的Google字體


Adobe字體(高級)
Adobe字體(以前為Typekit)提供了+14,000種令人驚嘆的字體的集合?,F在,這項經過改進的新服務使Creative Cloud訂戶  可以通過單擊按鈕輕松訪問其整個字體庫。與Typekit不同,Adobe Fonts取消了對頁面視圖的限制,并使所有字體均可在桌面和Web上使用。

注意:Creative Cloud訂閱(帶有Adobe字體)的起始價格為$ 20,99 /月。


成都搭建網站服務自定義字體(字體松鼠)
除了提供  許可用于商業用途的免費字體之外,Font Squirrel還以其Font Identifier  和  Font Generator聞名  。

Webfont Generator允許您將合法擁有權利的任何字體轉換為(.ttf或.otf文件格式),并將其轉換為可用的WebFont工具包,其中包括易于使用的層疊樣式表(CSS)。


不同的字體格式和瀏覽器支持
在過去的幾年中,現代瀏覽器極大地改善了它們支持自定義字體的方式。但是,即使在今天,并非所有瀏覽器都支持所有格式。

以下是最受歡迎的瀏覽器以及它們當前支持的字體格式:


(來源:https :  //www.w3schools.com/Css/css3_fonts.asp)

我總是建議您使用TTF / OTF和WOFF來確保所有瀏覽器都支持您的字體。

有關受支持的字體格式的更多詳細信息,請嘗試  “我可以使用  -一種用于研究不同瀏覽器版本(免費)的功能兼容性的出色工具”。

如何使用@ font-face將自定義字體添加到您的網站 
下面說明的@ font-face CSS規則是向網站添加自定義字體的最常用方法。

步驟1:下載字體
成都搭建網站服務在您的網站上找到要使用的自定義字體,然后下載TrueType字體文件格式(.ttf)。您還可以下載OpenType字體格式(.otf)

步驟2:創建用于跨瀏覽的WebFont工具包
將您的.ttf或.otf文件上傳到  Webfont生成器  ,然后下載Web字體工具包。

步驟3:將字體文件上傳到您的網站
使用FTP或文件管理器,將Web字體工具包中找到的所有字體文件上載到網站。*通常,該工具包將包含多個文件擴展名,例如(.eot),(。woff),(。woff2),(。 ttf)和(.svg)。

您的工具包還將包含級聯樣式表(.css),您需要在第4步中進行更新和上傳。

*此步驟將根據您網站的構建和托管方式而有很大不同。

步驟4:更新并上傳您的CSS文件
在諸如Textedit,NotePad或Sublime之類的文本編輯器中打開CSS文件  。

通過上傳每個文件,將現有的源URL替換為您創建的新URL。成都網絡外包找創新互聯  13518219792

默認情況下,源URL位置在下載的Web字體工具包中設置。需要用服務器上的位置替換它。

這是一個簡單的例子:

更新之前:

@ font-face { 
font-family:“ CustomFont”; 
src:url(“ CustomFont.eot”); 
src:url(“ CustomFont.woff”)format(“ woff”),
url(“ CustomFont.otf”)format(“ opentype”),
url(“ CustomFont.svg#filename”)format(“ svg”); 
}


更新后:

@ font-face { 
font-family:“ CustomFont”; 
src:url(“ https://yoursite.com/css/fonts/CustomFont.eot”); 
src:url(“ https://yoursite.com/css/fonts/CustomFont.woff”)格式(“ woff”),
url(“ https://yoursite.com/css/fonts/CustomFont.otf”)格式(“ opentype”),
url(“ https://yoursite.com/css/fonts/CustomFont.svg#filename”)format(“ svg”); 
}

更新CSS文件后,您需要將其上傳到您的網站(服務器)。

步驟5:在CSS聲明中使用自定義字體
現在,您的層疊樣式表和字體文件已上傳到服務器,您可以開始在CSS聲明中使用自定義字體,以幫助改善HTML的外觀。

這可以通過多種方式完成,包括將站點范圍的聲明添加到主CSS文件中。

這是一個簡單的示例:

h1 { 
font-family:'CustomFont',Arial,sans-serif; 
font-weight:normal; 
font-style:normal; 
}

如何在流行的網站構建工具中添加字體
內容管理系統(WordPress,Drupal,Joomla等)
您可以通過幾種不同的方式將自定義字體添加到諸如WordPress(WP)之類的內容管理系統(CMS  )中:

使用@ font-face CSS添加自定義字體使用  WordPress插件添加字體從Google字體手動添加  字體

一般來說,將自定義字體添加到CMS時,上面顯示的5步過程將是默認方法。盡管對于熟悉代碼操作的人員來說,該過程似乎非常簡單,但是新手用戶通常會尋找替代方案。

如果您使用的是WP,并且沒有任何編輯源代碼(主題文件)的經驗,那么您很可能希望依靠  版式插件。插件使添加自定義字體變得更加容易,而無需自己編寫任何代碼。

使用WP插件時,我要注意的是,它們可能會 在您的網站上引起各種  問題。在您的網站上使用插件之前,務必先研究插件。

最后,由于Google字體提供了開發人員API,因此您還可以選擇使用functions.php文件將這些字體“ 手動添加 ”到主題中。

網站建設者(PageCloud,Squarespace,Wix,Weebly)
在線上有大量的網站構建器選項,它們以不同的方式管理自定義字體。 

Google字體
在大多數情況下,頂級網站建設者可以輕松地從熱門網站(如Google字體)添加字體。

例如,使用PageCloud,添加來自Google的字體再簡單不過了。您所需要做的就是復制并粘貼字體,瞧,您的字體已添加到頁面中,可以用任何方式設置樣式!


但是,并非所有的網站建設者都可以輕松地添加Google字體。

例如,在Weebly中添加Google字體將需要您編輯網站的源代碼(CSS)。他們 在自己的知識庫中解釋了  8個步驟的過程。


以下是頂尖的網站建設者以及他們如何管理Google字體的簡短列表:

頁面云
廣場空間
eb
Shopify
網絡流
如您所見,每個網站構建器都使用不同的方法來添加字體,字體的范圍從非常簡單到有些復雜。


自定義字體
在大多數情況下,當希望添加Google字體中不存在的自定義字體時,您需要在網站上編輯CSS。根據您決定使用的網站構建器,此過程可能會大不相同。

我建議您搜索他們各自的知識庫和社區論壇以獲取更多信息。

例如,使用PageCloud添加自定義字體的  過程與  上面提供的分步指南非常相似。

摘要
無論您有使用CSS的經驗如何,都可以按照本文中的說明進行操作,以將字體添加到任何網站構建平臺。

但是,一旦您將想要的字體成功添加到網站上,您需要提出的問題是:

您是否可以自定義字體的外觀?(字體粗細,顏色,行高,字母間距,不透明度等)是否可以自定義網站布局以使字體脫穎而出(文本,圖像,視頻等的位置)

如果您沒有使用CSS的豐富經驗,那么在使用CMS或基于嚴格模板的網站構建器(例如SquareSpace)時,這些自定義設置可能會非常具有挑戰性。

這就是為什么我建議使用諸如PageCloud之類的靈活網站構建器的原因  ,該構建器  在尋求創建具有幾乎無限的樣式和字體選項的獨特布局時為您提供無與倫比的靈活性。

分享題目:成都搭建網站服務
標題網址:http://m.newbst.com/news20/183070.html

成都網站建設公司_創新互聯,為您提供網站制作、定制開發品牌網站建設網站建設、自適應網站、網站改版

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

網站建設網站維護公司