本篇文章分為三個部分
- 前言
- 語法懶人包
- 語法詳細說明
前言
不曉得有沒有人跟我一樣，覺得PChome新聞台的文章文字預設字體偏小(預設13px)，有時候文章內容多一點，其實看起來挺辛苦的，雖然是可以進行編輯去設定大小，但是他只有7種字體大小可以選，變化其實不多
而且我總是覺得手動調整麻煩，尤其是如果是在Word中先把文章打完再轉過來的話，還必須要全選後再去調整字體大小
並且我覺得很重要的一點，就是因為他的字體大小的單位是用pt，不是用em，對於某些人來說，這是很不親切的設定
pt和em有什麼差別，我用簡短的方式來說明好了，在解釋em和pt的差別之前，先說明一下，瀏覽器都有字體預設的大小，以Google的Chrome瀏覽器來說，他預設字體是"中"，這可以從"設定"中去更改。(注意!我這邊說的是字體大小，而不是整張網頁的"縮放")
而可能有些人會因為視力不良，或者是用了4K螢幕之類的，使用了超高的解析度，這樣就會造成字體太小，所以去調整大小(通常放大比較多)
而這時你網頁(部落格)字體的單位如果是pt，他是固定像素的字體，所以不管你瀏覽器的字體設定多大，他都不會變化(除非你放大整張網頁)，而em是屬於"相對"單位，會隨著你的瀏覽器設定而去改變字體大小
說到這，反應比較快的人應該懂了吧，PChome的預設字體是用pt，所以並不會根據瀏覽器的設定做變化，這是比較不便利的做法，因此，阿輝在這邊提供的方法，是可以直接將你的文章整篇 調整大小的同時，還將字體的單位改成em，以照顧有需要將字體放大瀏覽的使用者
語法懶人包
基本上用法和上一篇的首行縮排做法一樣，先看原始碼
- 語法：
- <div style="font-size: 1rem;">
文章內容
</div>
然後將第一行的<div style="font-size: 1rem;">貼在所有內容的最前面(一樣要用HTML碼的編輯模式，請參考前篇)
之後再將</div>插入文章的最後即可完成
另外，如果要調整文字大小，請修改最後的1rem，將其修改為你所需要的大小
- 1rem=瀏覽器預設的大小
- 2rem=放大2倍
- 2.5rem=放大2.5倍
- 以此類推，根據你需要的大小來調整數值
例如要將字體放大兩倍，則將語法改為<div style="font-size: 2rem;">
亦可和上一章的首行縮排效果並用，請使用下方語法
- 語法：
- <div style="text-indent: 2em;font-size: 1rem;">
文章內容
</div>
語法詳細說明
在說明之前，請先確定你看過前言的部分，先知道pt和em的差異，以及前一篇的首行縮排
先來看看語法的部分
- 語法：
- <div style="font-size: 1rem;">
文章內容
</div>
因為是要針對整編文章的文字進行設定(原PChome新聞台預設的字體是13px，真的有點小。至於我是怎麼知道的?懂CSS語法的人，直接檢視原始碼就可以查到了)，所以一樣用DIV標籤把整篇文章包起來，而這邊使用CSS中的font-size屬性進行文字大小的設定，我這邊設定的值為1rem，而1rem的字體大小，在一般瀏覽器的預設大小，是16px，所以我設定為1rem，就等於是把字體大小設定為16px
font-size屬性是CSS中設定字體大小所用的，如果你對CSS有概念的話，也可以將他用在其他標籤內。而字體大小也是可以任意設定的，可參考下面
- 範例：
-
字體大小0.8em
字體大小1em
字體大小1.2em
字體大小1.4em
字體大小2em
- 語法：
-
<p style="font-size: .8rem;">字體大小0.8em</p>
<p style="font-size: 1rem;">字體大小1em</p>
<p style="font-size: 1.2rem;">字體大小1.2em</p>
<p style="font-size: 1.4rem;">字體大小1.4em</p>
<p style="font-size: 2rem;">字體大小2em</p>
上面的範例中可以看到，我將font-size屬性套用在<p>標籤中，因此只要你有需要設定字體的地方，並且對CSS有一定的概念，也可以自行套用該CSS效果，而字體大小也可以根據需求進行設定
其實font-size屬性還可以使用很多單位，但最常見的就是px、em，也有部分的人會使用pt，關於單位的部份我就不多解釋了，基本上，因為我除了希望把字體放大之外，還希望文章內的文字，可以隨使用者的瀏覽器設定進行縮放，所以阿輝在這邊使用了rem做為單位
而font-size屬性和上一篇用到的text-indent屬性是可以一起使用的，而CSS語法中，如果需要套用兩個以上的屬性，只要在各屬性中間使用分號(;)隔開，就可以套用複數的屬性，所以只要將其語法改成<div style="text-indent: 2em;font-size: 1rem;">即可，就可以做到將字型調整為1rem並且縮排兩個字元
既然提到了rem，就先解釋一下rem是什麼吧。
因為CSS有繼承關係，而我前面提到，PChome新聞台預設的字體是13px，而13px是一個絕對單位，假設我這邊使用的單位是em，設定為2em，則在瀏覽器上看，字體大小會是13*2=26px。而因為基數寫死了(用px為單位)，就算我在瀏覽器中更改字體的大小，因為基數不變(單位為px，顯示結果並不會根據瀏覽器設定做變化)，所以最後的結果就是，不管我瀏覽器設定怎麼更動，結果還是不變
rem的觀念和em其實是一樣的，都是相對單位，只是差別在於，em會繼承原本框架所設定的數值，而PChome新聞台預設的字體是13px，所以1em=13px。而rem則不會繼承原本框架所設定的值，他是相對於根元素<html>，一般情況下，並不會在<html>標籤上做任何的設定，所以使用rem來設定字體，則跳出了原本預設的13px，回到基礎預設值，因此就具有跟隨瀏覽器設定縮放的功能
如果前面看不太懂也沒關係，因為牽扯到了CSS的層級概念，如果沒有相關的知識，是很難理解的。簡單的說，在PChome新聞台的環境底下，使用em無法讓字體可以隨瀏覽器設定做變化，因此我使用rem這個單位
根據前面提到的em是相對大小，因為PChoem新聞台的預設字體是13px(我是怎麼知道的?懂CSS語法的人，直接檢視原始碼就可以查到了)，所以1em就等於是13px，1.3em=13*1.3=
