用canvas畫字還是頭一回，要想和UI設計的畫的一模一樣還是真有些苦難，不過現在實現的效果已經很像了。
<!--通過字型檔案引入字型-->
<style>
@font-face {
font-family: TitilliumWeb-BoldItalic;
src: url(TitilliumWeb-BoldItalic.ttf);
}
@font-face {
font-family: TitilliumWeb-Light;
src: url(TitilliumWeb-Light.ttf);
}
</style>
<div>
<span style="font-family: TitilliumWeb-BoldItalic;">230ft<span>
<span style="font-family: TitilliumWeb-Light;">230ft<span>
</div>
<canvas id="textFont" height="2000px" width="1000px">
</canvas>
<script>
//獲取dom節點
var c = document.getElementById("textFont");
//獲取上下文
var ctx = c.getContext("2d");
//設定字型大小 及 字型型別 從定義好的字型中設定
ctx.font = "60px TitilliumWeb-Light";
//設定繪圖的顏色
ctx.strokeStyle = '#ED2024';
//設定畫筆填充顏色
ctx.fillStyle="#ED2024"；
//設定字型的比例 寬和高的比例
ctx.scale(1.1,1)
//畫字型的邊框 描邊
ctx.strokeText("230ft",100,200);
//填充字型
ctx.fillText("230ft",100,200);
</script>