石家莊搭建網(wǎng)站服務(wù)在您的網(wǎng)站上添加獨特的字體是使您的設(shè)計脫穎而出的好方法。
在本文中，我將逐步指導(dǎo)您向網(wǎng)站添加任何字體。
注意：由于并非所有網(wǎng)站都是以相同的方式構(gòu)建和管理的，因此，我將介紹添加自定義字體的最通用的方法，然后說明最受歡迎的網(wǎng)站構(gòu)建平臺如何支持自定義字體。
內(nèi)容：
網(wǎng)絡(luò)上可以使用什么字體？
不同的字體格式和瀏覽器支持
如何使用@ font-face添加自定義字體（CSS規(guī)則）
內(nèi)容管理系統(tǒng)如何支持自定義字體
網(wǎng)站建設(shè)者如何支持自定義字體
網(wǎng)絡(luò)上可以使用什么字體？
從技術(shù)上講，您幾乎可以將任何字體添加到任何網(wǎng)站。
但是，在聯(lián)機(jī)搜索字體時，您始終要牢記價格， 許可協(xié)議和安裝方法。
事不宜遲，以下是一些最受歡迎的字體庫，可幫助您找到理想的字體：
Google字體（免費）
Google字體擁有令人印象深刻的庫，其中包含將近1000種免費許可證字體，可以通過其交互式Web目錄進(jìn)行瀏覽。由于 開發(fā)者API的存在，可以說Google字體是最容易添加到您的網(wǎng)站以及我建議您開始搜索的字體。
相關(guān)： 最受歡迎的20種最流行的Google字體
Adobe字體（高級）
Adobe字體（以前為Typekit）提供了+14,000種令人驚嘆的字體的集合。現(xiàn)在，這項經(jīng)過改進(jìn)的新服務(wù)使Creative Cloud訂戶 可以通過單擊按鈕輕松訪問其整個字體庫。與Typekit不同，Adobe Fonts取消了對頁面視圖的限制，并使所有字體均可在桌面和Web上使用。
注意：Creative Cloud訂閱（帶有Adobe字體）的起始價格為$ 20,99 /月。
石家莊搭建網(wǎng)站服務(wù)自定義字體（字體松鼠）
除了提供 許可用于商業(yè)用途的免費字體之外，F(xiàn)ont Squirrel還以其Font Identifier 和 Font Generator聞名 。
Webfont Generator允許您將合法擁有權(quán)利的任何字體轉(zhuǎn)換為（.ttf或.otf文件格式），并將其轉(zhuǎn)換為可用的WebFont工具包，其中包括易于使用的層疊樣式表（CSS）。
不同的字體格式和瀏覽器支持
在過去的幾年中，現(xiàn)代瀏覽器極大地改善了它們支持自定義字體的方式。但是，即使在今天，并非所有瀏覽器都支持所有格式。
以下是最受歡迎的瀏覽器以及它們當(dāng)前支持的字體格式：
（來源：https : //www.w3schools.com/Css/css3_fonts.asp）
我總是建議您使用TTF / OTF和WOFF來確保所有瀏覽器都支持您的字體。
有關(guān)受支持的字體格式的更多詳細(xì)信息，請嘗試 “我可以使用 -一種用于研究不同瀏覽器版本（免費）的功能兼容性的出色工具”。
如何使用@ font-face將自定義字體添加到您的網(wǎng)站
下面說明的@ font-face CSS規(guī)則是向網(wǎng)站添加自定義字體的最常用方法。
步驟1：下載字體
步驟2：創(chuàng)建用于跨瀏覽的WebFont工具包
將您的.ttf或.otf文件上傳到 Webfont生成器 ，然后下載Web字體工具包。
步驟3：將字體文件上傳到您的網(wǎng)站
使用FTP或文件管理器，將Web字體工具包中找到的所有字體文件上載到網(wǎng)站。*通常，該工具包將包含多個文件擴(kuò)展名，例如（.eot），（。woff），（。woff2），（。 ttf）和（.svg）。
您的工具包還將包含級聯(lián)樣式表（.css），您需要在第4步中進(jìn)行更新和上傳。
*此步驟將根據(jù)您網(wǎng)站的構(gòu)建和托管方式而有很大不同。
步驟4：更新并上傳您的CSS文件
在諸如Textedit，NotePad或Sublime之類的文本編輯器中打開CSS文件 。
默認(rèn)情況下，源URL位置在下載的Web字體工具包中設(shè)置。需要用服務(wù)器上的位置替換它。
這是一個簡單的例子：
更新之前：
@ 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文件后，您需要將其上傳到您的網(wǎng)站（服務(wù)器）。
步驟5：在CSS聲明中使用自定義字體
現(xiàn)在，您的層疊樣式表和字體文件已上傳到服務(wù)器，您可以開始在CSS聲明中使用自定義字體，以幫助改善HTML的外觀。
這可以通過多種方式完成，包括將站點范圍的聲明添加到主CSS文件中。
這是一個簡單的示例：
h1 {
font-family：'CustomFont'，Arial，sans-serif;
font-weight：normal;
font-style：normal;
}
如何在流行的網(wǎng)站構(gòu)建工具中添加字體
內(nèi)容管理系統(tǒng)（WordPress，Drupal，Joomla等）
您可以通過幾種不同的方式將自定義字體添加到諸如WordPress（WP）之類的內(nèi)容管理系統(tǒng)（CMS ）中：
使用@ font-face CSS添加自定義字體使用 WordPress插件添加字體從Google字體手動添加 字體
一般來說，將自定義字體添加到CMS時，上面顯示的5步過程將是默認(rèn)方法。盡管對于熟悉代碼操作的人員來說，該過程似乎非常簡單，但是新手用戶通常會尋找替代方案。
如果您使用的是WP，并且沒有任何編輯源代碼（主題文件）的經(jīng)驗，那么您很可能希望依靠 版式插件。插件使添加自定義字體變得更加容易，而無需自己編寫任何代碼。
使用WP插件時，我唯一要注意的是，它們可能會 在您的網(wǎng)站上引起各種 問題。在您的網(wǎng)站上使用插件之前，務(wù)必先研究插件。
最后，由于Google字體提供了開發(fā)人員API，因此您還可以選擇使用functions.php文件將這些字體“ 手動添加 ”到主題中。
網(wǎng)站建設(shè)者（PageCloud，Squarespace，Wix，Weebly）
在線上有大量的網(wǎng)站構(gòu)建器選項，它們以不同的方式管理自定義字體。
Google字體
在大多數(shù)情況下，頂級網(wǎng)站建設(shè)者可以輕松地從熱門網(wǎng)站（如Google字體）添加字體。
例如，使用PageCloud，添加來自Google的字體再簡單不過了。您所需要做的就是復(fù)制并粘貼字體，瞧，您的字體已添加到頁面中，可以用任何方式設(shè)置樣式！
但是，并非所有的網(wǎng)站建設(shè)者都可以輕松地添加Google字體。
例如，在Weebly中添加Google字體將需要您編輯網(wǎng)站的源代碼（CSS）。他們 在自己的知識庫中解釋了 8個步驟的過程。
以下是頂尖的網(wǎng)站建設(shè)者以及他們?nèi)绾喂芾鞧oogle字體的簡短列表：
頁面云
廣場空間
蠟
eb
Shopify
網(wǎng)絡(luò)流
如您所見，每個網(wǎng)站構(gòu)建器都使用不同的方法來添加字體，字體的范圍從非常簡單到有些復(fù)雜。
自定義字體
在大多數(shù)情況下，當(dāng)希望添加Google字體中不存在的自定義字體時，您需要在網(wǎng)站上編輯CSS。根據(jù)您決定使用的網(wǎng)站構(gòu)建器，此過程可能會大不相同。
我建議您搜索他們各自的知識庫和社區(qū)論壇以獲取更多信息。
例如，使用PageCloud添加自定義字體的 過程與 上面提供的分步指南非常相似。
摘要
無論您有使用CSS的經(jīng)驗如何，都可以按照本文中的說明進(jìn)行操作，以將字體添加到任何網(wǎng)站構(gòu)建平臺。
但是，一旦您將想要的字體成功添加到網(wǎng)站上，您需要提出的問題是：
您是否可以自定義字體的外觀？（字體粗細(xì)，顏色，行高，字母間距，不透明度等）是否可以自定義網(wǎng)站布局以使字體脫穎而出（文本，圖像，視頻等的位置）
如果您沒有使用CSS的豐富經(jīng)驗，那么在使用CMS或基于嚴(yán)格模板的網(wǎng)站構(gòu)建器（例如SquareSpace）時，這些自定義設(shè)置可能會非常具有挑戰(zhàn)性。
這就是為什么我建議使用諸如PageCloud之類的靈活網(wǎng)站構(gòu)建器的原因 ，該構(gòu)建器 在尋求創(chuàng)建具有幾乎無限的樣式和字體選項的獨特布局時為您提供無與倫比的靈活性。
