[CSS3] 使用 font-face 讓頁面可以顯示使用者電腦沒有安裝的字型

在傳統的網頁如果我們要使用字型的話一定要確保使用者的電腦裡面也有，不然使用者看到的會跟我們看到的不一樣，而在 CSS3 之後可以透過 font-face 的技術，讓使用者在開啟頁面的時候可以透過網路下載字型，這樣就能確保看到的樣子跟我們看到的一樣了。

使用方式要先把字體上傳到雲端，接著透過 font-face 定義字型：

@font-face {
  font-family: "Your Font";
  src: url(fontUrl);
}

注意這邊的 font-family 是變數，定義後後面就會依據這個變數取用他，而 src 裡面則是字型檔的網址。

接著就可以使用了。

h1{
  font-family: "Your Font";
}

那如果想要節省一些網路的資源，可以使用 local 先去判斷使用者的電腦是否有該字型例如：

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
}

如果使用者電腦裡有同名的字型，就不用去抓雲端的字體了。