1. 程式人生 > >CSS 設定字型樣式為自己下載的個性字型

CSS 設定字型樣式為自己下載的個性字型

一般情況下設定字型樣式“font-family”都是電腦自帶的字型,如果想要用一些個性字型就要從網上下載使用了:

下載字型地址:http://font.chinaz.com/zhongwenziti_2.html  (有很多這樣的網站,在此我就找了一個)

選擇自己喜歡的樣式,下載到本地(這裡有的字型是收費的),解壓檔案:

把字尾為"ttf"的檔案複製到專案裡:

基本工作已完成,下面就是使用了:

在頁面的樣式裡新增:

        @font-face {
	  font-family:'myFont'; /*這個相當於給字型起個名字,比如“微軟雅黑”*/
	  src:url('assets/font/香蕉牛奶字型.ttf') /*指定字型的路徑*/
	}

最後引用字型"myFont":

        <div style="font-family:myFont;font-size:50px;">這是我下載的字型,就喜歡整些花裡胡哨的!!!</div>

頁面效果如下:

OK!