成都搭建網(wǎng)站服務(wù)

2022-07-28 分類：網(wǎng)站建設(shè)

成都搭建網(wǎng)站服務(wù)在您的網(wǎng)站上添加獨(dú)特的字體是使您的設(shè)計(jì)脫穎而出的好方法。

在本文中，我將逐步指導(dǎo)您向網(wǎng)站添加任何字體。

注意：由于并非所有網(wǎng)站都是以相同的方式構(gòu)建和管理的，因此，我將介紹添加自定義字體的最通用的方法，然后說(shuō)明最受歡迎的網(wǎng)站構(gòu)建平臺(tái)如何支持自定義字體。

內(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ī)搜索字體時(shí)，您始終要牢記價(jià)格，許可協(xié)議和安裝方法。

事不宜遲，以下是一些最受歡迎的字體庫(kù)，可幫助您找到理想的字體：

Google字體（免費(fèi)）

Google字體擁有令人印象深刻的庫(kù)，其中包含將近1000種免費(fèi)許可證字體，可以通過(guò)其交互式Web目錄進(jìn)行瀏覽。由于開(kāi)發(fā)者API的存在，可以說(shuō)Google字體是最容易添加到您的網(wǎng)站以及我建議您開(kāi)始搜索的字體。

相關(guān)：最受歡迎的20種最流行的Google字體

Adobe字體（高級(jí)）

Adobe字體（以前為T(mén)ypekit）提供了+14,000種令人驚嘆的字體的集合?，F(xiàn)在，這項(xiàng)經(jīng)過(guò)改進(jìn)的新服務(wù)使Creative Cloud訂戶可以通過(guò)單擊按鈕輕松訪問(wèn)其整個(gè)字體庫(kù)。與Typekit不同，Adobe Fonts取消了對(duì)頁(yè)面視圖的限制，并使所有字體均可在桌面和Web上使用。

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

成都搭建網(wǎng)站服務(wù)自定義字體（字體松鼠）

除了提供許可用于商業(yè)用途的免費(fèi)字體之外，F(xiàn)ont Squirrel還以其Font Identifier 和 Font Generator聞名。

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

不同的字體格式和瀏覽器支持

在過(guò)去的幾年中，現(xiàn)代瀏覽器極大地改善了它們支持自定義字體的方式。但是，即使在今天，并非所有瀏覽器都支持所有格式。

以下是最受歡迎的瀏覽器以及它們當(dāng)前支持的字體格式：

（來(lái)源：https : //www.w3schools.com/Css/css3_fonts.asp）

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

有關(guān)受支持的字體格式的更多詳細(xì)信息，請(qǐng)嘗試 “我可以使用 -一種用于研究不同瀏覽器版本（免費(fèi)）的功能兼容性的出色工具”。

如何使用@ font-face將自定義字體添加到您的網(wǎng)站

下面說(shuō)明的@ font-face CSS規(guī)則是向網(wǎng)站添加自定義字體的最常用方法。

步驟1：下載字體

成都搭建網(wǎng)站服務(wù)在您的網(wǎng)站上找到要使用的自定義字體，然后下載TrueType字體文件格式（.ttf）。您還可以下載OpenType字體格式（.otf）

步驟2：創(chuàng)建用于跨瀏覽的WebFont工具包

將您的.ttf或.otf文件上傳到 Webfont生成器，然后下載Web字體工具包。

步驟3：將字體文件上傳到您的網(wǎng)站

使用FTP或文件管理器，將Web字體工具包中找到的所有字體文件上載到網(wǎng)站。*通常，該工具包將包含多個(gè)文件擴(kuò)展名，例如（.eot），（。woff），（。woff2），（。 ttf）和（.svg）。

您的工具包還將包含級(jí)聯(lián)樣式表（.css），您需要在第4步中進(jìn)行更新和上傳。

*此步驟將根據(jù)您網(wǎng)站的構(gòu)建和托管方式而有很大不同。

步驟4：更新并上傳您的CSS文件

在諸如Textedit，NotePad或Sublime之類的文本編輯器中打開(kāi)CSS文件。

通過(guò)上傳每個(gè)文件，將現(xiàn)有的源URL替換為您創(chuàng)建的新URL。成都網(wǎng)絡(luò)外包找創(chuàng)新互聯(lián) 13518219792

默認(rèn)情況下，源URL位置在下載的Web字體工具包中設(shè)置。需要用服務(wù)器上的位置替換它。

這是一個(gè)簡(jiǎn)單的例子：

更新之前：

@ 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ù)器，您可以開(kāi)始在CSS聲明中使用自定義字體，以幫助改善HTML的外觀。

這可以通過(guò)多種方式完成，包括將站點(diǎn)范圍的聲明添加到主CSS文件中。

這是一個(gè)簡(jiǎn)單的示例：

h1 {

font-family：'CustomFont'，Arial，sans-serif;

font-weight：normal;

font-style：normal;

}

如何在流行的網(wǎng)站構(gòu)建工具中添加字體

內(nèi)容管理系統(tǒng)（WordPress，Drupal，Joomla等）

您可以通過(guò)幾種不同的方式將自定義字體添加到諸如WordPress（WP）之類的內(nèi)容管理系統(tǒng)（CMS ）中：

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

一般來(lái)說(shuō)，將自定義字體添加到CMS時(shí)，上面顯示的5步過(guò)程將是默認(rèn)方法。盡管對(duì)于熟悉代碼操作的人員來(lái)說(shuō)，該過(guò)程似乎非常簡(jiǎn)單，但是新手用戶通常會(huì)尋找替代方案。

如果您使用的是WP，并且沒(méi)有任何編輯源代碼（主題文件）的經(jīng)驗(yàn)，那么您很可能希望依靠版式插件。插件使添加自定義字體變得更加容易，而無(wú)需自己編寫(xiě)任何代碼。

使用WP插件時(shí)，我要注意的是，它們可能會(huì) 在您的網(wǎng)站上引起各種問(wèn)題。在您的網(wǎng)站上使用插件之前，務(wù)必先研究插件。

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

網(wǎng)站建設(shè)者（PageCloud，Squarespace，Wix，Weebly）

在線上有大量的網(wǎng)站構(gòu)建器選項(xiàng)，它們以不同的方式管理自定義字體。

Google字體

在大多數(shù)情況下，頂級(jí)網(wǎng)站建設(shè)者可以輕松地從熱門(mén)網(wǎng)站（如Google字體）添加字體。

例如，使用PageCloud，添加來(lái)自Google的字體再簡(jiǎn)單不過(guò)了。您所需要做的就是復(fù)制并粘貼字體，瞧，您的字體已添加到頁(yè)面中，可以用任何方式設(shè)置樣式！

但是，并非所有的網(wǎng)站建設(shè)者都可以輕松地添加Google字體。

例如，在Weebly中添加Google字體將需要您編輯網(wǎng)站的源代碼（CSS）。他們在自己的知識(shí)庫(kù)中解釋了 8個(gè)步驟的過(guò)程。

以下是頂尖的網(wǎng)站建設(shè)者以及他們?nèi)绾喂芾鞧oogle字體的簡(jiǎn)短列表：

頁(yè)面云

廣場(chǎng)空間

蠟

Shopify

網(wǎng)絡(luò)流

如您所見(jiàn)，每個(gè)網(wǎng)站構(gòu)建器都使用不同的方法來(lái)添加字體，字體的范圍從非常簡(jiǎn)單到有些復(fù)雜。

自定義字體

在大多數(shù)情況下，當(dāng)希望添加Google字體中不存在的自定義字體時(shí)，您需要在網(wǎng)站上編輯CSS。根據(jù)您決定使用的網(wǎng)站構(gòu)建器，此過(guò)程可能會(huì)大不相同。

我建議您搜索他們各自的知識(shí)庫(kù)和社區(qū)論壇以獲取更多信息。

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

摘要

無(wú)論您有使用CSS的經(jīng)驗(yàn)如何，都可以按照本文中的說(shuō)明進(jìn)行操作，以將字體添加到任何網(wǎng)站構(gòu)建平臺(tái)。

但是，一旦您將想要的字體成功添加到網(wǎng)站上，您需要提出的問(wèn)題是：

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

如果您沒(méi)有使用CSS的豐富經(jīng)驗(yàn)，那么在使用CMS或基于嚴(yán)格模板的網(wǎng)站構(gòu)建器（例如SquareSpace）時(shí)，這些自定義設(shè)置可能會(huì)非常具有挑戰(zhàn)性。

這就是為什么我建議使用諸如PageCloud之類的靈活網(wǎng)站構(gòu)建器的原因，該構(gòu)建器在尋求創(chuàng)建具有幾乎無(wú)限的樣式和字體選項(xiàng)的獨(dú)特布局時(shí)為您提供無(wú)與倫比的靈活性。

分享題目：成都搭建網(wǎng)站服務(wù)
標(biāo)題網(wǎng)址：http://jinyejixie.com/news20/183070.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、定制開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

成都搭建網(wǎng)站服務(wù)