瀏覽器在渲染一個 HTML 元件時，會計算出這個元件的 Width / Height。然而，寬及高的計算方式和 Box Model 裡面的 Content、Padding、Border、Margin 有什麼關係，我們可以透過 Chrome DevTools 來觀察。
近期在重刻部落格時，也面臨挑選一個適合網站的字型，主要針對繁體中文及英文兩種語言。
在選擇時，就有必要先了解一下字型的基本知識，以及怎麼把這些字型加入到網站當中。
在英文字型中，有一些常見的分類，例如：Serif、Sans、Mono。
在印刷品中，常常會用有襯線的字型，所謂 Serif 就是襯線的意思。例如經典的報紙字型 Times New Roman，給人的感覺會比較正式、古典一些，因此適合作為印刷品的字型，或是長文閱讀使用。
由於我目前使用的 Blog 框架 Hexo 已經是個有點歷史的框架了，更新的並不頻繁，並且當我想嘗試客製化一些前端的小功能時，發現 Hexo 其實彈性相當低。
因此在搜索了一陣子之後，找到了 Astro 這個近幾年蠻紅的新框架，也是所謂的 SSG（Static Site Generator），不但可以搭配 React 來開發，還標榜 Fast by default！於是乎我就來開始研究這個框架。
Astro 是一個 Content-driven 的 Framework (Astro - Why Astro)，相較於主流 Frameworks（如 React, Vue）的 SPA 架構需要在第一次瀏覽時載入幾乎整個網站的 HTML + JavaScript；而 Astro 的目標是盡可能提供單純的 HTML，並透過 Islands Architecture 來最小化 Client-Side 執行 JavaScript，因此載入的 Bundle 小、前端執行的程式碼短，便造就載入速度快速。
接下來的內容便來記錄一些安裝的流程。