html5

指定繁體中文字型

Google Web Fonts

		body{
		  font-family: "微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif;
		}
		

<meta name='apple-itunes-app' content='app-id=477927812'>

工具下載

modernizr

html5宣告。驗證html5文件

<head>標籤裡一定還要有<title>標籤

		//文件類型宣告
		原本:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		改成:<!doctype html>
		
		//meta宣告
		原本:<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		改成:<meta charset="utf-8">
		
		//css宣告
		原本:<link type="text/css" rel="stylesheet" href="lounge.css">
		改成:<link rel="stylesheet" href="lounge.css">
		
		//js宣告
		原本:<script type="text/javascript" src="lounge.js"></script>
		改成:<script src="lounge.js"></script>
		如果是寫在網頁上,可直接寫成:<script>
		                           var youRock = true;
		                           </script>
		

html5新增屬性


用javascript給按鈕一個click處理器

		window.onload = init;  //我們使用的init函式會等到網頁完全載入後才會受到呼叫與執行
		function init(){
		  var button = document.getElementById("addButton");
		  button.onclick = handleButtonClick;
		}
		function handleButtonClick(){
		  alert("Button was clicked!");
		}
		

Geolocation API

Geolocation
getCurrentPosition
watchPosition
clearWatch

緯度(latitude):標明地球上的南緯或北緯。

經度(longitude):標明東經或西經。

大家可能看過用「度/分/秒」格式表示的經緯度,例如(4738'34"),也可能看過用浮點數格式,例如(47.64, -122.54)。而在使用Geolocation API時,都採用浮點數格式。
如果要從「度/分/秒」轉換成浮點數,可用以下函式:

		function degreesToDecimal(degrees, minutes, seconds){
		  return degrees + (minutes / 60.0) + (seconds / 3600.0);
		}
		

Geolocation範例:

		window.onload = getMyLocation;  //網頁載入完成後,呼叫getMyLocation函式。
		function getMyLocation(){
		  if(navigator.geolocation){  //用來判斷瀏覽器是否支援Geolocation
		    navigator.geolocation.getCurrentPosition(displayLocation, displayError);
		  }else{
		    alert("哇!不支援Geolocation");
		  }
		}
		function displayLocation(position){
		  var latitude = position.coords.latitude;  //取得緯度
		  var longitude = position.coords.longitude;  //取得經度
		  
		  var div = document.getElementById("location");
		  div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
		}
		function displayError(error){  //這是我們新做的處理器,它會接受由Geolocation API傳來的error物件。error物件包含一個code特性,特性值是數字0到3之一。這是把錯誤訊息與JavaScript的各段程式碼聯繫起來的好方式。
		  var errorTypes = {  //我們建立一個物件,具有四個特性,分別命名為0到3。這些特性的內容是一段錯誤訊息字串,我們想分別把錯誤訊息與各段程式碼串聯起來。
		    0: "Unknown error",
		    1: "Permission denied by user",
		    2: "Position is not available",
		    3: "Request timed out"
		  };
		  
		  var errorMessage = errorTypes[error.code];
		  if(error.code == 0 || error.code == 2){
		    errorMessage = errorMessage + " " + error.message;
		  }
		  var div = document.getElementById("location");
		  div.innerHTML = errorMessage;
		}
		

解釋navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options)

計算兩組座標間距的程式:

		function computeDistance(startCoords, destCoords){  //這個函式接受兩組座標:一組起點座標、一組終點座標;然後回傳座標間的距離(以公里為單位)。
		  var startLatRads = degreesToRadians(startCoords.latitude);
		  var startLongRads = degreesToRadians(startCoords.longitude);
		  var destLatRads = degreesToRadians(destCoords.latitude);
		  var destLongRads = degreesToRadians(destCoords.longitude);
		  
		  var Radius = 6371;  //radius of the Earth in km(6371公里,是地球的半徑)
		  var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + Math.cos(startLatRads) * Math.cos(destLatRads) * Math.cos(startLongRads - destLongRads)) * Radius;
		  
		  return distance;
		}
		function degreesToRadians(degrees){  //我們將於繪圖平台的章節細談這個函式。
		  var radians = (degrees * Math.PI)/180;
		  return radians;
		}
		

計算兩點座標距離的範例:(計算ourCoords與現在位置的距離)線上測試網址

		假設一個座標:
		var ourCoords = {
		  latitude: 47.624851,
		  longitude: -122.52099;
		};
		function displayLocation(position){
		  var latitude = position.coords.latitude;
		  var longitude = position.coords.longitude;
		  var div = document.getElementById("location");
		  div.innerHTML = "You are at Latitude: " + latitude + ", Longitude: " + longitude;
		  
		  var km = computeDistance(position.coords, ourCoords);
		  var distance = document.getElementById("distance");
		  distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ";
		  
		}
		

使用地圖google map

		//這是Google Maps Javascript API的位址。此處使用sensor=true,因為程式要使用各位的位置。如果只要使用地圖而不會用到位置,則改為sensor=false
		<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
		

看Geolocation API

getCurrentPosition(successHandler, errorHandler, positionOptions)

Position在執行successHandler時,會傳回position物件
coords
trimstamp(此特性在知道位置的新舊程度時很有用)
Coordinates
latitude
longitude
accuracy準確度範例(每次提供位置時,也會一併提供可信度達95%的準確度(以公尺為單位)。例如我們的位置準確度在500公尺以內,只要在方圓500公尺內,位置大致是可信的。)
altitude
altitudeAccuracy
heading
speed

watchPosition:觀察我們的程動,並於位置改變時回報。看起來就像getCurrentPosition方法,但行為有點不一樣:它在每次改變位置時,重複呼叫成功處理器(successHandler)。

監測範例

  1. 你的應用程式呼叫watchPosition,傳給它一個成功處理器的函式。
  2. watchPosition待在背景,並持續監測我們的位置。
  3. 每當位置改變,watchPosition就呼叫成功處理器,以回報新的位置。
  4. watchPosition繼續監測我們的位置(並回報給成功處理器),直到我們呼叫clearWatch清除監測為止。
		//建立按鈕表單
		<form>
		  <input type="button" id="watch" value="Watch me">
		  <input type="button" id="clearWatch" value="clear watch">
		</form>
		
		//為按鈕增加watchPosition和clearPosition
		function getMyLocation(){
		  if(navigator.geolocation){
		    var watchButton = document.getElementById("watch");
		    watchButton.onclick = watchLocation;
		    var clearWatchButton = document.getElementById("clearWatch");
		    clearWatchButton.onclick = clearWatch;
		  }else{
		    alert("Oops, no geolocation support");
		  }
		}
		var watchId = null;  //此為全域變數
		//編寫watchLocation
		function watchLocation(){
		  watchId = navigator.geolocation.watchPosition(displayLocation, displayError);  //watchPosition接受兩個參數,第一個是成功處理器,第二個是錯誤處理器。
		}
		
			//編寫clearWatch:清除監測行動的處理器。我們需要取得watchId,並把它傳給geolocation.clearWatch方法。

		function clearWatch(){
		  if(watchId){  //確定有watchId,然後…
		    navigator.geolocation.clearWatch(watchId); //呼叫geolocation.clearWatch方法,並把watchId傳入。如此即可停止監測行動。
		    watchId = null;
		  }
		}
		

關於options

		  var positionOptions = {
		    enableHighAccuracy: false,  //高準確度。開啟這個選項,即可告訴API,我們需要所能得到的最準確位置,就算消耗甚大也沒關係。但請記得,使用這個選項不保證瀏覽器能給出較準確的位置。
		    timeout: Infinity,  //此選項控制瀏覽器判斷位置時可用的時間長短。預設為Infinity(也就是說瀏覽器有無限的時間可用。)。此值可以重設,需以毫秒為單位;例如設為10000,就是給瀏覽器10秒鐘的位置尋找時限,沒找到就會呼叫錯誤處理器。
		    maximumAge: 0  //最後一個是maximumAge選項,設定瀏覽器必需重新計算位置的最大時限。預設為0,也就是說瀏覽器將一直重新計算位置(每次計算都會呼叫getCurrentPosition)
		  }
		  //解釋maximumAge:這個選項告訴瀏覽器,位置的記錄可以放得多舊。如果瀏覽器存有的某個位置已達60秒之久,而maximumAge的設定為90000(等於90秒),此時呼叫getCurrentPosition將回傳這個已存在的快取位置(瀏覽器不會試圖取得新位置)。但如果maximumAge設定為30秒,瀏覽器則會強制判斷新位置。
		

將options傳給getCurrentPosition

		//推薦方法一:
		navigator.geolocation.getCurrentPosition(displayLocation, displayError, {
		  enableHighAccuracy: true,
		  maximumAge: 60000
		});
		
		//方法二:
		var options = (enableHighAccuracy: true, maximumAge: 60000);
		navigator.geolocation.getCurrentPosition(displayLocation, displayError, options);
		

canvasAPI查閱

		//簡單範例1:
		<canvas id="tshirtCanvas" width="600" height="200" style="border:1px solid black;">不支援Canvas</canvas>
		如果是使用CSS來設定canvas的寬高,則會變成放大縮小。請注意。
		
		<script>
		  var canvas = document.getElementById("tshirtCanvas");
		  var context = canvas.getContext("2d");
		context.fillRect(10, 10, 100, 100);
		</script>
		
不支援Canvas

繪製方塊及改變填滿的顏色

		function drawSquare(canvas, context){
		  var w = Math.floor(Math.random() * 40);
		  var x = Math.floor(Math.random() * canvas.width);  //根據canvas的寬度與高度產生,才不會超過canvas的區域。
		  var y = Math.floor(Math.random() * canvas.height);
		  context.fillStyle = "lightblue";  //淡藍色;也可以直接輸入#abcdef。
		  context.fillRect(x, y, w, w);
		}
		

建立路徑(path)並依路徑畫出圖形:以三角形為例

		<canvas id="triangle" width="600" height="200" style="border:1px solid black;"></canvas>
		
		<script>
		var canvas = document.getElementById("triangle");
		var context = canvas.getContext("2d");
		
		
		context.beginPath();  //開始一段路徑(path)
		context.moveTo(100, 50);   //將第一個點,移動到座標為(100, 50)的位置。
		context.lineTo(250, 75);  //移動路徑到第二個點,座標為(250, 75)的位置。
		context.lineTo(125, 30);  //移動路徑到第三個點,座標為(125, 30)的位置。
		context.closePath();  //closePath()連接了路徑起點(100, 150)與目前所在的最後一個點(125, 30)。
		
		context.lineWidth = 5;
		context.stroke();
		context.fillStyle = 'red';
		context.fill();
		</script>
		

繪製圓形,要瞭解arc方法:

		context.arc(x, y, radius, startAngle, endAngle, direction);
		

人類用角度(degree)思考,但canvas環境則是用弧度(radian)思考。所以以下附上角度轉弧度的函式:

			<script>
			範例:
			var canvas = document.getElementById("circle1");
			var context = canvas.getContext("2d");
			context.beginPath();
			context.arc(100, 100, 75, 0, degreesToRadians(270), true);
			context.fillStyle="lightblue";
			context.fill();
			
			function degreesToRadians(degrees){
			  return (degrees * Math.PI) / 180;
			}
			</script>
		

整理成畫圓的函式drawCircle:

			function drawCircle(canvas, context){
			  var radius = Math.floor(Math.random() * 40);
			  var x = Math.floor(Math.random() * 40);
			  var y = Math.floor(Math.random() * canvas.height);
			  
			  context.beginPath();
			  context.arc(x, y, radius, 0, degreesToRadians(360), true);
			  
			  context.fiilStyle = "lightblue";
			  context.fill();
			}
		

在canvas上繪製文字:對齊、字型、基線、填色、描邊

整理成drawText函式:

			function drawText(canvas, context){
			  var selectObj = document.getElementById("foregroundColor");
			  var index = selectObj.selectedIndex;
			  var fgColor = selectObj[index].value;
			  
			  context.fillStyle = fgColor;
			  context.font = "bold 1em sans-serif";
			  context.textAlign = "left";
			  context.fillText("I saw this tweet", 20, 40);
			  
			  selectObj = document.getElementById("tweets");
			  index = selectObj.selectedIndex;
			  var tweet = selectObj[index].value;
			  context.font = "italic 1.2em serif";
			  context.fillText(tweet, 30, 100);
			  
			  context.font = "bold 1em sans-serif";
			  context.textAlign = "right";
			  context.fillText("and all i got was this lousy t-shirt!", canvas.width-20, canvas.height-40);
			}
		

在canvas載入圖像

			<script>
			  var canvas = document.getElementById("placeImage");
			  var context = canvas.getContext("2d");
			  var imagePic = new Image();
			  imagePic.src = "./images/11.png";
			  
			  imagePic.onload = function(){  //意思是:當圖像完全載入後,再執行這個函式。,我們使用context的drawImage方法繪製圖像。
			    context.drawImage(imagePic, 20, 120, 70, 70);  //20跟120是指定圖像的x, y位置;70,70是指定寬度與高度。
			  };
			</script>
		

將canvas所繪置的圖形輸出成.png檔

			function makeImage(){
			  var canvas = document.getElementById("tshirtCanvas");  //先擷取canvas物件
			  canvas.onclick = function(){  //加入一個事件處理器,如此在按下canvas時,即建立一個影像
			    window.location = canvas.toDataURL("image/png");  //很簡單,只需要透過canvas物件裡的toDataURL方法。
			  };
			}
		

video影片播放

請在apache的設定檔加上以下的MIME type,以讓firefox可以播放webm的影片格式(另轉檔可保留mp4、webm、flv):

			AddType video/webm webm
		
video取得資料的順序
		<video id="video"
				poster="images/prerollposter.jpg" 
				width="480" height="360" 
				controls
				autoplay>
        	<source src="video/preroll.mp4">
        	<source src="video/preroll.webm">
        	<source src="video/preroll.ogv">
        	<object type="application/x-shockwave-flash" data="http://flv-player.net/medias/player_flv_multi.swf" width="400" height="300">
    <param name="movie" value="http://flv-player.net/medias/player_flv_multi.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="FlashVars" value="flv=http://notes.carlos-studio.com/Nutrilite/N-C-S.flv&autoload=1&volume=50&margin=0&bgcolor=ae9475&bgcolor1=ae9475&bgcolor2=ae9475&showvolume=1&showtime=1&showprevious=1&showfullscreen=1" />
   </object>
        	<p>Sorry, your browser doesn't support the video element</p>
		</video>
		

屬性說明

主流瀏覽器上常用的三種影片格式:容器/video encoding/audio encoding

  1. MP4/H.264/AAC
  2. WebM/Vp8/Vorbis:副檔名為.webm
  3. Ogg/Theora/Vorbis:副檔名為.ogg

進一步指定影片格式

		<source src="video/preroll.mp4">
		<source src="video/preroll.webm">
		<source src="video/preroll.ogv">
		可改成
		<source src="video/preroll.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>  //mp4的codecs最為複雜,因為h.264支援多種「profile」,可用於不同情況的不同的編碼方式(例如高頻寬與低頻寬的不同)。所有以,想填對codecs,還需要更瞭解影片編碼方式的細節。
		<source src="video/preroll.webm" type='video/webm; codecs="vp8, vorbis"'>
		<source src="video/preroll.ogv" type='video/ogg; codecs="theora, voibis"'>
		//如果不曉得該寫哪一種codecs參數,請只使用MIME類型。雖然比較沒效率,但大多數時候是沒問題的。
		

更多type參數的資訊

video API列表

方法

特性

捕捉事件

		<video src="..." poster="..." onloadstart="..." oncanplay="..." onwaiting="..."></video>
		

設定播放清單範例

		var position = 0;
		var playlist;
		var video;
		
		window.onload = function(){
		  playlist = ["video/preroll", "video/areyoupopular", "video/destinationearth"];
		  video = document.getElementById("video");
		  video.addEventListener("ended", nextVideo, false);  //添加一個影片結束時的ended事件處理器。
		  
		  video.src = playlist[position] + getFormatExtension();
		  video.load();  //載入影片
		  video.play();  //播放
		}
		
		function nextVideo(){
		  position++;
		  if(position >= playlist.length){
		    position = 0;
		  }
		  video.src = playlist[position] + getFormatExtension();
		  video.load();
		  video.play();
		}
		
		//就大多數案例而言,如果不曉得codec,能得到"maybe"這樣的自信程度已經夠了。
		function getFormatExtension(){
		  if(video.canPlayType("video/mp4") != ""){
		    return ".mp4";
		  }else if(video.canPlayType("video/webm") != ""){
		    return ".webm";
		  }else if(video.canPlayType("video/ogg") != ""){
		    return ".ogv";
		  }
		}
		
		alert("Playing " + video.currentSrc);  //可知道瀏覽器選擇哪一個影片
		

video物件提供一個canPlayType方法,可以判斷成功播放某種影片格式的可能性。可被canPlayType方法接受的格式描述方式,與我們在<source>標籤中所用的描述方式相同;回傳值則為以下三種:空字串、"maybe"、"probably"。

		//例:
		video.canPlayType("video/ogg");
		video.canPlayType('video/ogg; codecs="theora, vorbis"');
		//以上兩個例子:如果瀏覽器知道無法播放影片時會回傳空字串;如果瀏覽器覺得或許可以播放影片時會回傳字串"maybe";如果瀏覽器覺得很有把握播放影片時會回傳字串"probably"。
		//注意:只有附上codec參數後,瀏覽器對於播放的自信程度才可能超過"maybe"。即使瀏覽器知道可以播放的影片類型,但不保證可以播放實際的影片;例如說,如果影片的bitrate(位元率)太高,瀏覽器就無法予以解碼。
		//bitrate是指瀏覽器在每個時間單位中必須處理的位元數量,用以正確地解譯並播放影片。
		

正確的MIME類型供應影片檔案

可修改httpd.conf檔案,或在儲存影片的目錄中建立一個.htaccess,在檔案中加入以下數行:

		//這幾行告訴伺服器如何提供採用這幾種副檔名的檔案。
		AddType video/ogg .ogv
		AddType video/mp4 .mp4
		AddType video/webm .webm
		

本地端儲存storage api

		//1、設定鍵值對
		localStorage.setItem("sticky_0", "Pick up dry cleaning");  //第一個參數是鍵,第二個參數是值。目前只能儲存字串,後面有解決辦法可以儲存數值及物件。
		或
		localStorage["sticky_0"] = "Pick up dry cleaning";
		//2、取得特定鍵的值
		localStorage.getItem("sticky_0");  //可取得Pick up dry cleaning
		或
		var sticky = localStorage["sticky_0"];
		//3、儲存整數
		localStorage.setItem("numitems", 1);  //還是會被儲存為字串1,不會是整數1。
		parseInt(localStorage.getItem("numitems"));  //可將字串1取出後,透過parseInt轉成整數。
		//4、儲存浮點數
		localStorage.setItem("numitems2", 1.99);  //還是會被儲存為字串1.99,不會是浮點數1.99。
		parseFloat(localStorage.getItem("numitems2"));  //可將字串1.99取出後,透過parseFloat轉成浮點數。
		//移除鍵值對
		localStorage.removeItem(key);  //移除特定key及所對應的值。
		

逐一跑過localStorage裡所儲存的鍵值對,並抓出來:使用length特性及key方法

		for(var i = 0; i < localStorage.length; i++){
		  var key = localStorage.key(i);  //將鍵的名稱抓出來存在key變數
		  var value = localStorage[key];  //將鍵所對應的值抓出來存在value變數
		  alert(value);
		}
		

將localStorage中的資料全部清除

		localStorage.clear();
		

在localStorage中儲存陣列

利用JSON建立一個表達陣列的字串,即:JSON.stringify、JSON.parse兩個方法

		function init(){
		  var stickiesArray = localStorage["stickiesArray"];
		  if(!stickiesArray){  //在localStorage不存在stickiesArray的話
		    stickiesArray = [];  //建立一個空陣列
		    localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));  //將陣列轉成字串後,再存到localStorage
		  }else{
		    stickiesArray = JSON.parse(stickiesArray);  //將stickiesArray字串轉成JSON物件
		  }
		  
		  for(var i = 0; i < stickiesArray.length; i++){
		    var key = stickiesArray[i];
		    var value = localStorage[key];
		    addStickyToDOM(value);
		  }
		}
		
		function deleteSticky(key){
		  localStorage.removeItem(key);
		  var stickiesArray = getStickiesArray();
		  
		  if(stickiesArray){
		    for(var i = 0; i < stickiesArray.length; i++){
		      if(key == stickiesArray[i]){
		        stickiesArray.splice(i, 1);  //splice從陣列中移除項目,移除的起點為第一個引數(i)指定的位置,移除的數量則由第二個引數(1)所指定。
		      }
		    }
		    localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
		    
		  }
		}
		

如果超出localStorage的5MB容量時,會拋出例外,可用以下方式提醒使用者或更具意義的方式,有些瀏覽器並不會拋出QUOTA_EXCEEDED_ERR:

		try{
		  localStorage.setItem(myKey, myValue);
		}catch(e){
		  if(e == QUOTA_EXCEEDED_ERR){
		    alert("Out of storage!");
		  }
		}
		

localStorage還有另一個東西叫sessionStorage。如果把使用全域變數localStorage的地方都替換為sessionStorage,所有項目將只存在瀏覽器session期間。一旦session結束(也就是使用者關閉瀏覽器視窗),儲存區中的項目就清除了。sessionStorage物件支援的API與localStorage完全相同。


中文思源黑體

	  /*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
 }