在製作網頁時，我們會需要一些文字或是圖片來裝飾我們的頁面，這些資料可能來自設計師或是後端工程師。但是我們在前端製作頁面時，沒有這些文字與圖片資源時該怎麼辦呢？這時候我們可以考慮先填上一些假資料、圖片來模擬網站最後的呈現效果，以下我整理了一些常用的假資料，只要複製貼到網站上就可以使用，非常的方便～
Favicon：網頁小圖示Fake images：假圖片Lorem：假英文文字Chinese Lorem：假中文文字Font Awesome：小圖示Google Fonts：google 提供字型網址列的 Logo icon 小圖示，在 HTML 的 中加入。
<link rel="icon" type="image/x-icon" href="網址.ico">
網址列的 Logo icon 小圖示，在 HTML 的 中加入。
第一種，假圖產生的語法：
<img src='https://fakeimg.pl/300x200/97CBFF/ECF5FF' />
第二種，假圖產生的語法：
<img src='https://picsum.photos/300/200?random=1' />
第三種，假圖產生的語法：
<img src='https://source.unsplash.com/random/300x200?sig=1' />
lorem + 英文單字個數，例如 lorem56 代表總共產出 56 個英文單字。在 HTML 中加入 Lorem。
lorem56
lorem56 由 56 個英文單字組成，單字都一樣，但在句子的排列組合，每次都會是不一樣的順序。
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat incidunt magnam maiores distinctio aspernatur assumenda nobis, in quaerat. Molestias ex id vel consequuntur temporibus reiciendis assumenda quisquam magnam quasi doloremque, ipsam velit. Quam qui deleniti et sit adipisci? Veritatis soluta quo quaerat, dignissimos, molestias, voluptatum asperiores est praesentium eaque modi repellat temporibus exercitationem! Ipsum, ratione quae.
VS Code 預設的 Lorem 單字為 30 個字元。（這我手算的，尚無相關資料佐證）
Chinese Lorem 是 VS Code 的套件（延伸模組），在 HTML 中輸入語法後即可產生。
ctlorem
輸入 ctlorem 會亂數產生無意義的中文字，只是句子本身沒什麼意義。
收到想想花蓮大型迅速感情公共女朋友本來平衡最初平方米祝福，最近科學保存主義介紹的說她說一本導航操作系統賺錢，讀書次數我市都不設備接受論文每天編輯此次研究所校園垃圾，力量義務金錢廣播崇拜歡迎
光臨的人，緩緩家族貨幣吃飯相互，交換可愛作為證件，給我們三大精靈我。
在之前的 Button 組件實作篇中，我們有介紹 Font Awsome 的用法，只要先輸入 CDN。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
在 HTML 輸入對應圖示的語法。
<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
可以它的官網 example 找到其他的設定，比如圖示大小、動畫等等應用。另外這裡介紹 4.7 版本，如果想使用較新的 6.x 版，可以到 Font Awsome（新）註冊獲取 CDN （kits）。
有時候我們會需要一些藝術字型來增加文字的多樣性，Google Fonts 就是解決這類問題，使用方法也不難，困難的是要使用哪種字型來搭配圖片。
HTML：
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Square+Peg&display=swap" rel="stylesheet">
CSS：
<style>
@import url('https://fonts.googleapis.com/css2?family=Square+Peg&display=swap');
</style>
CSS：
font-family: 'Square Peg', cursive;
因為我不太常用 Google Fonts，比較常用內建字型，或是懶惰就都不去修改字型，為了方便日後找到 Google Fonts 的用法，就先放在這裡。
依照下列步驟執行：
<head>標籤中其他還有像是字型粗細可以調整（頁面可用滑鼠單擊開啟）
Google Fonts 除了提供字型之外，也有提供 icons 可使用。
我們介紹一些常用的資源的來源，目的是能夠在開發上有效的利用這些資源，縮短蒐集資料的時間，對於專案的開發有所幫助。
iThome鐵人賽
看影片追技術