有一句話是這麼說:「魔鬼藏在細節裡。」
在作品集網站中,細節也是如此重要,像是網站的文字大小部分,雖然對於正在觀看網站的人來說或許沒有察覺,但是如果這個細節做到,也是可以讓網站體驗更加流暢。
所以,今天這篇文章將要分享在wordpress調整文字大小的三個方法,這三個方法其中一個方法並不能改變所有網站,只能改變單頁,但卻也實用。
內容目錄
前言
在分享技巧之前,我想分享我念高中的一段小故事,由於我的位子坐在第一排位置,所以離黑板靠得非常近。
有次上了一堂課,那天老師開了一個大螢幕來上課,由於該老師是非設計科專任,所以在我的位置上會看到他使用了滿滿的大字級的新細明體、白色背景、高明度色彩字體在上課。
不到兩分鐘,我的腦袋感到暈眩以及想吐,眼睛感到非常刺痛,深深感受到什麼叫視覺暴力,完全勉強撐到下課。
我完全並不知道老師到底在上什麼,我只知道下課後跑去問我同學作業做什麼。
事後回想,老師的用意或許是,想讓後面的也能看清楚,但是他沒有考慮到前面的學生看字的舒適度。
因此,從我的故事來看,文字大小是一種最必要的魔鬼細節,在網站上如果你不想讓你的客戶一看過就跑走,這時,適當調整文字的大小是你在使用者體驗中是至關重要的步驟之一。
WordPress調整文字大小方法
方法一
如果你的作品集網站中有需要透過寫文章來分享作品細節,在Wordpress文章後台有一個步驟可以調整。
標題更改
當你打完字後可以透過反白出現上方小型編輯器去調整,最大標題H1至最小標題H6,但現在很少人會去動到H6,因此大部分使用者會動到H4左右。
個別更改
有一個段落若想要讓文字大小任意調整的話,可以透過右邊的區塊找到樣式,再從排版樣式中去調整尺寸。
若不想讓系統固定定義尺寸的話,可以按下旁邊的滑桿按鈕,去根據數值調整。
方法二
這個方法主要利用程式碼去更改文字大小,但他比較特別的是需要用到程式碼去使用,首先我們要到Wordpress後台介面的外觀找到自訂選項。
通常你可以在自訂的介面找到附加的 CSS選項。
在下方表格中可以填入CSS程式碼,讓整體網站字的大小都一樣。
往下滑將會看到CSS文字參考範例。
CSS文字參考範例
p {
font-size:18px;
}
而如果你想修改標題大小,你也可以更改。
h2 {
font-size:36px;
}
方法三
這個方法屬於單頁式更改,主要使用於形象主頁為主(請不要使用在所有一般頁面,網站資源會負荷不了),因此我們需要到Wordpress介面後台找到外掛並點擊安裝外掛。
在搜尋欄打上「Elementor」並安裝第一個外掛和啟用。
回到後台找到頁面的新增頁面。
進入之後,點擊上方的使用Elementor編輯按鈕。
進入之後,看到左邊側邊攔有好幾個按鈕,其中有內部段、標題、內容編輯器,這些按鈕進去的界面都可以進行調整文字大小,每一個介面有點不同,但卻很相似。
正因為介面屬於中文,所以你大概會知道怎麼用。
這個方法屬於較為特殊情況使用,不應用於所有頁面。
網站能使用什麼字體?
主要看你是以什麼語言發表文章,假設你是以中文來發表文章的話,建議使用:微軟正黑體、思源黑體者兩大類。
不建議使用其他字體,因為其他字體很可能會產生缺字,進而使使用者體驗不佳。
則英文的話有26個字,比中文字少得多,也因此英文製造的總類也多,可以選擇的範圍也多。
中英文網站字體下載:google fonts、英文網站字體下載:dafont (需要注意版權)
延伸閱讀:25款高質感英文字體設計推薦,無需在Envato平台慢慢找直接節省挑字體時間
網站大小字級的範圍?
雖然說這沒有公式,但是下面的範圍可以做參考。
電腦網頁 | 手機網頁 |
標題:35Px左右 | 標題:21Px左右 |
副標題:30Px左右 | 副標題:18 Px到 16Px |
正文:16 px 到 18 px ( 21Px為極限 ) | 正文:16 px 到 15 px ( Apple 的指南為15Px ) |
結論
這篇文章是你可以在Wordpress中調整文字大小的三個方法,這也是在作品集網站中最重要的一個技巧,希望這篇文章能夠幫助到你。
而如果你已經有作品,但想建立自己的作品集網站的話,歡迎點擊下方按鈕來聊聊。
如何在p标签里面加字体大小,不是在CSS里面加?
比如比如
如果是文字編輯器中P標籤加上字體大小的話,你可以直接在文字編輯器中直接按後面的「+」,找到自訂HTML區塊,會得出一個特別的小程式碼框,打上
<p style=”font-size: 16px;”>我是段落。</p>
,即可進行更改文字大小。