中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

成都搭建網(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)建和管理的，因此，我將介紹添加自定義字體的最通用的方法，然后說明最受歡迎的網(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ī)搜索字體時(shí)，您始終要牢記價(jià)格，  許可協(xié)議和安裝方法。

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

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

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


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


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

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


（來源：https :  //www.w3schools.com/Css/css3_fonts.asp）

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

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

如何使用@ font-face將自定義字體添加到您的網(wǎng)站 
下面說明的@ 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）。

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

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

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

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

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

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

更新之前：

@ 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的外觀。

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

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

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字體手動(dòng)添加  字體

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

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

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

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

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

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

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


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

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


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

頁面云
廣場空間
蠟
eb
Shopify
網(wǎng)絡(luò)流
如您所見，每個(gè)網(wǎng)站構(gòu)建器都使用不同的方法來添加字體，字體的范圍從非常簡單到有些復(fù)雜。


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

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

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

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

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

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

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

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

本文題目：成都搭建網(wǎng)站服務(wù)
文章出自：http://www.rwnh.cn/news/183070.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、服務(wù)器托管、靜態(tài)網(wǎng)站、微信小程序、Google、做網(wǎng)站

廣告

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

h5響應(yīng)式網(wǎng)站建設(shè)
田林县| 万全县| 若尔盖县| 台东市| 湖南省| 巴南区| 洛隆县| 玉环县| 昌宁县| 通渭县| 文山县| 前郭尔| 万盛区| 闵行区| 周口市| 东明县| 吉木萨尔县| 彭州市| 桓台县| 日照市| 阳曲县| 昂仁县| 稷山县| 卢龙县| 日照市| 武川县| 大竹县| 双江| 嘉义县| 个旧市| 景宁| 合肥市| 犍为县| 肇东市| 凤翔县| 兴国县| 富宁县| 扎鲁特旗| 阜南县| 麻城市| 泸定县|