WordPress字體看似微不足道。畢竟,要考慮WordPress主題,配色方案,背景圖像和博客布局。
誰有時間字體樣式?
設計網站可能需要很長時間,但事實是,所有網站所有者都應注意將重點放在他們用於網站書面文字的WordPress字體上。字體樣式是重要的網頁設計細節,會影響您網站的可讀性。
只需移至Kinsta,即可將WordPress網站的速度提高200%。
今天免費遷移
更不用說,使用正確的字體配對可以幫助您在競爭中脫穎而出,提高轉換率,甚至提高品牌知名度。
但前提是您做對了。今天,我們將深入探討什麼是WordPress字體,以及如何為您的WordPress網站找到最佳的字體。
最常見的字體樣式
您在WordPress網站上使用的字體會說明您的品牌,無論您是否想要。而且,即使WordPress字體的最小改動也可以改變網站訪問者對您公司的整體看法。
當然,解釋字體背後的歷史和心理將需要其自己的博客文章。但是,為了給您一個概念,以下是您可能要在網站上使用的五種主要字體樣式:
1.腳本
腳本字體花哨且彎曲,很像草書手寫體。但是,它們確實分為兩個不同的類別:正式和休閑。
正式腳本是所有這些中最幻想的。他們模仿了17和18世紀的手寫大師的美麗作品。最值得注意的是,字體樣式伴隨著超出每個字元末尾的頂部斜線或捲曲和蓬勃發展。
休閑手稿看起來更像是現代書法,比正式手稿更易讀。它們是常綠的,這意味著它們永遠不會過時。而且它們最適合用於大字體的徽標,因為它們可能難以大量閱讀。
2.顯示
顯示字體新穎,古怪,並且時常看起來很時髦。它們會滲出個性,並會立即引起人們的注意。
它們在19世紀流行,並經常出現在老式的廣告牌,海報和小冊子中。您會注意到,許多顯示字體(例如Rockwell)都帶有所謂的平板襯線。換句話說,延伸到字元末尾的抽籤是塊狀且濃密的。
這種樣式最適合在標題或主要公告中使用,因為它們的可讀性不佳,尤其是在網上。
3.現代
現代字體樣式非常結構化。他們看上去專業,通常對他們有冷淡而嚴肅的感覺。
許多現代字體樣式都帶有長而細的襯線,這些襯線延伸到每個字元的末尾。
另外,現代字體的字母沒有偏斜,因為它們傾向於強調垂直位置。您還會注意到,許多這樣的字體樣式在每個字母中的粗細都不同,這在不破壞用戶體驗的情況下增加了一些樣式。
現代字體最適合用於標題和其他大尺寸正文。
4.襯線
襯線字體是最傳統的字體。它們帶有簡單的標記,稱為襯線,延伸超過每個字元的末尾。這種做法可以追溯到羅馬時代,當時人們經常看到帶有火把的手寫字母。
如果我們列表中最保守的字體樣式。它也是最受信任的字體樣式之一。
您會看到常見的襯線字體,例如Times New Roman,主要出現在印刷材料中。儘管有些人為網站的正文選擇了這種字體樣式,但不建議這樣做,因為在文本很多的情況下,襯線很難閱讀。但是,它對於大標題和徽標很有用。
5.無襯線
San Serif字體是最常在網上找到的。它們乾淨整潔,外觀現代,缺少延伸到每個字元末尾的襯線。實際上,缺少襯線是使這種字體樣式在網上查看時如此吸引人的原因。
這種字體風格在二十和三十年代變得流行起來,當時一切都變得華而不實了。有些人甚至認為此字體樣式應僅用於廣告中,因為他們認為它不適用於其他材料。
但是,如今,無處不在的無襯線字體(如Helvetica)。
為什麼WordPress字體選擇很重要
完美的版式包含很多內容。例如,視覺層次,網格,對比度,前導,空白和大小都很重要。但是,如果您從一開始就沒有選擇正確的字體樣式,那麼其他任何事情都將無關緊要。
讓我們看一下字體樣式對WordPress網站的成功至關重要的一些最令人信服的原因:
- 在網站的網頁設計中發揮作用,並與用戶體驗息息相關。
- 提高品牌知名度和知名度,同時讓您有機會表達自己的個性。
- 確保您的網站及其內容的可讀性和可用性。
- 建立網站內容的層次結構,尤其是博客文章。
- 增強訪問者正在尋找的站點的一致性。
- 將您的品牌或業務顯示為專業。
- 輕鬆引導網站訪問者瀏覽您的內容。
如您所見,字體樣式不僅僅是看起來不錯。這可能會對您作為網站所有者的成功產生重大影響,並影響他人對您品牌整體的看法。
如何為您的WordPress網站收集靈感
為您的WordPress網站選擇合適的字體可能會很麻煩,因為那裡有很多選擇。這就是為什麼知道如何獲得靈感如此重要的原因。
如果您找到的網站使用的是您喜歡的字體,並且想要添加到自己的網站中,那麼就會有一個巧妙的小技巧,可以找出他們正在使用的字體。
您所要做的就是突出顯示所需的字體,然後右鍵單擊它。然後選擇檢查元素。
接下來,在「計算」部分下,向下滾動以查找字體系列和其他字體信息。
如果您碰巧在自己喜歡的網站上找到了很棒的字體,但需要一些幫助將其與互補字體樣式配對,請查看“字體對''。
這個免費的在線資源可幫助您將完美的字體樣式組合在一起,在您的網站上看起來無縫。在這裡,您可以查看字體配對,下載字體對,甚至可以看到「狂野的」字體對。這將為您提供一個好主意,無論您想要的字體對是否適用於您的網站。
為什麼要在WordPress中使用自定義字體
排版可以對您的網站訪問者產生強大的影響。每個網站所有者的目標是給所有網站訪問者留下持久的印象。畢竟,這就是您建立品牌知名度並轉化更多潛在客戶和銷售的方式。
不確信這是真的嗎?讓研究證明一切:
兩名研究人員進行的一項研究發現,當給出一組使用簡單字體的指令,而另一種使用複雜字體的指令時,使用簡單字體的人在8.2分鐘內完成了任務。另一組花了15.1分鐘才能完成相同的確切任務。換句話說,簡單字體給人的印象是任務比複雜字體的任務容易。
那些研究人員進行了另一項研究,他們給一組人一個帶有簡單字體樣式的菜單,給另一個人一個帶有精美字體樣式的菜單。研究人員發現,帶有花哨字體菜單的小組認為,與使用簡單字體在菜單上烹飪食物的廚師相比,廚師具有更高的技能。
另一個實驗確定,根據所使用的字體類型,人們或多或少會相信陳述是正確的。
人們得到以下字形的陳述「金的原子序數為79」:
- 巴斯克維爾
- Comic Sans
- 現代計算機
- 喬治亞州
- 海爾維蒂察
- 投石機
最後,大多數人都同意在巴斯克維爾寫的那句話。作為列表中最正式和最專業的字體樣式,巴斯克維爾盡了最大的努力說服人們說對了。
藉助WordPress,我們的流量增長了1,187%。我們將向您展示方法。
加入20,000多個其他人,他們每周都會收到有關WordPress內部技巧的新聞!
現在訂閱
成功!感謝您的訂閱
您將在一周內收到下一期的Kinsta新聞通訊。
訂閱Kinsta新聞通訊
訂閱
我同意條款和條件以及隱私政策
那麼,這一切意味著什麼?
這意味著您對字體樣式的選擇可以確定網站訪問者是否會留下來並查看您所提供的內容。更重要的是,您網站的字體將有助於(或損害)說服人們您是值得與之開展業務的可信賴品牌的機會。
因此,儘管選擇自定義WordPress字體以使其在競爭中脫穎而出固然不錯,但最好的做法是了解字體的選擇遠不只是網頁設計和視覺吸引力。
在哪裡可以找到自定義WordPress字體
單個自定義WordPress字體曾經非常昂貴。因此,除非您有很多錢,否則更改字體樣式並非易事。
但是,如今,高級字體樣式的價格要便宜得多。最重要的是,您可以在網站和市場營銷資料中使用大量真正時尚的Web字體。
讓我們看一下在哪裡可以找到最好的WordPress自定義字體:
Google字體
Google字體是免費查找和自定義自己的字體樣式的最佳場所!進入網站後,您可以在句子,段落或數字中測試所需的字體,以了解其在網站上的外觀。
另外,您可以更改像素大小,將字體自定義為粗體,斜體,淺色/中號等,甚至可以在Google字體平台上更改顏色。然後,當您決定使用一種字體時,只需複製一個簡單的代碼即可將其嵌入到您的網站中。這是我們關於如何在WordPress中更改字體的深入指南。
1001免費字體
實際上,「 1001免費字體」擁有10,000種免費字體,這些字體按字母順序進行分類,從而可以輕鬆找到理想的字體。例如,您可以單擊花式,書法,點綴或畫筆類別來縮小搜索範圍。
找到喜歡的字體後,您可以免費下載該字體或向設計師捐款,以便將該字體用於商業用途。
字體怪胎
Font Freak擁有9,000多種免費字體和數千種高級字體,因此找到適合您WordPress網站的字體應該不是問題。超過400位設計師將其創意作品提交給Font Freak,因此總是有新鮮的新字體發布。
關於Font Freak最好的事情之一是PC和Mac版本。最後,您可以使用Font Freak的字體編輯器和管理器軟體來構建和編輯自己的字體。
字體空間
Fontspace有超過61,000種免費字體,可以在所有項目中使用。它們按照受歡迎的類別或字體樣式進行組織,因此輕鬆找到所需的確切字體類型。
來自世界各地的設計師為Fontspace做出了貢獻,並將其作品標記為可用於商業或個人用途。為了幫助您做出明智的決定,Fontspace還提供了字體評級以及指向設計師及其工作的鏈接,因此您可以進一步縮小對理想字體的搜索範圍。
請記住,使用這些第三方字體服務很棒,但是在WordPress中託管本地字體有一些優勢。當您在本地託管字體時,可以將它們存儲在自己的伺服器上,而不是鏈接到外部資產。
這樣做的最大優點之一是,您不必依賴第三方字體服務的伺服器即可正常運行。畢竟,如果他們的伺服器出現故障,則很有可能會影響您網站的字體。
完美的字體使您的品牌脫穎而出,提高了可讀性,以及更多!查看在哪裡可以找到適合您#WordPress網站的最佳字體! ??
點擊鳴叫
摘要
無論您是否喜歡,字體樣式都是WordPress網站設計的核心部分。您使用的字體將向站點訪問者傳達某種信息,並最終影響他們是否停留,閱讀您的內容甚至進行轉換。
幸運的是,有很多地方可以找到適合您品牌的完美的一種字體。因此,走到那裡,找到您喜歡的自定義字體,然後將其添加到WordPress網站。
需要一種簡單的方法來將圖標字體添加到WordPress網站嗎?查看有關如何正確使用WordPress圖標字體的詳細信息,並開始向您的站點添加易於縮放和站點訪問者喜歡的高解析度圖標。
0分享
- 0
- 0
- 0
- 0
- 0
- 0
- 0
- 0
.essb_links .essb_links_list li a {
margin-top:0px;
}
@media only屏幕和(最小寬度:64em){
.container–narrow.pb–60,
.knowledgebase .user-content {
職位:相對
}
.widget-share {
位置:絕對;
左:-200px;
頂部:0px;
高度:100%;
寬度:200像素;
框大小:border-box;
}
.widget-share-aligner {
寬度:200像素;
padding-right:62px;
框大小:border-box;
}
html(lang =「 nl」).widget-share-aligner {
寬度:210像素;
}
.widget-share-inner {
padding-bottom:62px;
}
.knowledgebase .user-content .widget-share-inner {
padding-top:0;
}
.widget-share .amount {
顯示:flex;
align-items:居中;
證明內容:flex-end;
寬度:100%;
右邊距:11px;
font-size:14px;
font-weight:500;
底邊距:10px;
}
.widget-share .amount svg {
右邊距:8px;
margin-left:10px;
}
.essb_links .essb_links_list {
flex-direction:列;
align-items:flex-end;
}
.essb_links .essb_links_list li {
顯示:塊;
margin-bottom:5px!important;
}
.widget-share__total {
margin-bottom:0px!重要;
}
.widget-share__total .heading–small {
顏色:#999999;
font-size:14px;
字體粗細:300;
}
.essb-total-value {
margin-right:4px;
}
}
.essb_links {
保證金:0px;
填充:0px;
}
.essb_counter_right {
顯示:無!重要;
}
.essb_links.essb_template_circles-retina .essb_link_hackernews一個,
.essb_links.essb_template_circles-retina .essb_link_reddit a,
.essb_links.essb_template_circles-retina .essb_link_mail a,
.essb_links.essb_template_circles-retina .essb_link_mwp一個,
.essb_links.essb_template_circles-retina .essb_link_buffer a,
.essb_links.essb_template_circles-retina .essb_link_linkedin a,
.essb_links.essb_template_circles-retina .essb_link_facebook a,
.essb_links.essb_template_circles-retina .essb_link_twitter a
{
顏色:#43414e!important;
背景:#f3f3f6!important;
}
.essb_links.essb_template_circles-retina li a:focus,.essb_links.essb_template_circles-retina li a:hover {
border-color:#fff!important;
背景:#43414e!重要;
}
.essb_links.essb_template_circles-retina a {
border-color:#f3f3f6!important;
背景:#f3f3f6;
}
.essb_links .essb_icon:之前{
font-size:15px!important;
頂部:8px;
左:9px;
}
.essb_links .essb_icon {
寬度:32px;
高度:32px;
}
.essb_links.essb_counter_modern_right .essb_counter_right {
背景:#f3f3f6!important;
}
@media only屏幕和(最大寬度:63.999em){
.widget-share-aligner {
位置:相對!重要;
top:0!重要;
}
.essb_links .essb_links_list li {
margin-right:8px!important;
}
}