1、首先在項目過程中新建文件夾fonts將準備好的ttf字體文件復制該文件夾下：
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：申請域名、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、太和網(wǎng)站維護、網(wǎng)站推廣。
2、然后在工程新建style.css，使用@font-face中的font-family和src引入字體，在src的屬性值填寫“url(“路徑”)”即可：
3、然后打開html文件，寫入一些文字，在上方的head標簽中引用css，使用link標簽引入，在href中寫入css文件的路徑即可：
4、最后打開瀏覽器，可以看到在瀏覽器的文字已經(jīng)改變了，引用是成功的：
html5中引入3d模型的方法是借助第三方PlayCanvas插件來完成的。
比如可以用以下方法實現(xiàn)圖片的360度旋轉(zhuǎn)：
代碼示例：
var render, loop, t, dt, //定義變量
DEG2RAD = Math.PI / 180, //角度轉(zhuǎn)弧度
cvs = document.querySelector('canvas'), //創(chuàng)建canvas
ctx = cvs.getContext('2d'),//繪制2d圖形上下文
teddy = new Image(), //創(chuàng)建圖像
heart = new Image(), //創(chuàng)建圖像中心
angle = 0,//初始化角度為0
reqAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
//創(chuàng)建動畫幀
cvs.width = 400;
cvs.height = 200;
teddy.src = 'xxx.jpg';
heart.src = 'yyy.jpg';
//開始渲染
render = function (timestamp) {
dt = timestamp - t;
t = timestamp;
// cavas設(shè)置為白色
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0, 0, cvs.width, cvs.height);
// 繪制中心
ctx.drawImage(heart, -20, -120);
// 繪制teddy
ctx.save();
ctx.translate(cvs.width/2, cvs.height/2); // 移動鼠標到畫布中心
ctx.rotate(DEG2RAD * angle); // 旋轉(zhuǎn)畫布
ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2); // 繪制中心圖片
angle += dt / 16.67 * 6; // increment angle ~ 360 deg/sec
ctx.restore();
};
loop = function (timestamp) {
reqAnimFrame(loop);
render(timestamp);
};
t = Date.now();
loop(t);
簡而言之,HTML5就是由新的標記引進的新元素形式和為現(xiàn)有元素新增的某些屬性，與新的JavaScript APIs的結(jié)合體。那HTML5中引入了新增加了哪些新標簽與JavaScript API結(jié)合體呢？我這里例舉了我們平時最常用的幾種：
1、 Canvas API是一個具有完整功能的JavaScript API并伴隨產(chǎn)生了新HTML5元素Canvas。通過Canvas API,您可以利用它和WebGL在瀏覽器中創(chuàng)建一個2 D或3 D繪圖場景，
2、 Contacts API主要應用在移動設(shè)備上，為瀏覽器提供對用戶通用通訊錄的訪問。它在瀏覽器內(nèi)建立一個本地存儲庫，來存儲聯(lián)系人信息。而不是通過訪問讓你所有聯(lián)系人信息直接保存在Google +、Facebook或其他網(wǎng)站上, Contacts API將允許您有本地存儲庫,網(wǎng)站可以通過本地存儲庫訪問存儲的聯(lián)系人信息。現(xiàn)在的主流瀏覽器都支持Contacts API
3、 通過File API 瀏覽器可以直接訪問用戶計算機的沙箱區(qū)域?qū)?shù)據(jù)存儲到文件系統(tǒng)。
4、 在HTML5中Forms API得到了發(fā)展，內(nèi)置了驗證功能，在接下來的課程中,您將會學習到如何通過使用內(nèi)置的規(guī)則實現(xiàn)表單驗證,以及如何添加自定義規(guī)則進行表單驗證。
5、 允許瀏覽器請求用戶的位置信息，一旦獲權(quán),瀏覽器可以通過許多不同的方法來確定計算機或設(shè)備的實際位置，它將會有一個比例尺來確認精確的地點位置。通過該API能獲取經(jīng)緯度等數(shù)據(jù),非常適合應用程序定位。
6、 Media Capture的功能是將本地設(shè)備通過JavaScript將與瀏覽器相連。你將能夠訪問攝像頭,攝像頭,等等。
7、 Messaging API被用來與其他API一起使用，比如web web workers,這個我們將將在后面的課程中進一步討論。
8、 選擇(Selection)API的就像jQuery庫一樣運用非常廣泛。在流行jQuery 、HTML5的今天,試圖從文檔對象模型選擇元素是比較復雜的。jQuery彌補了這一差距。其實變得很容易，HTML5將高級選擇功能直接內(nèi)置在瀏覽器中。使得瀏覽器的選擇性能得到很大的改善，甚至于JQuery選擇工具一樣速度。我并不是貶低jQuery。jQuery的優(yōu)勢就是DOM的選擇,但是,jQuery不僅僅只提供了選擇功能，事實上,在本課程中未來的演示的案例中,您將清楚的知道什么時候使用jQuery會更加便利,然后什么時候切換到本地選擇會更加方便。.
9、 Server-Sent Events API：一個網(wǎng)頁獲取新的數(shù)據(jù)通常需要發(fā)送一個請求到服務器,也就是向服務器請求的頁面.使用Server-Sent Events API,服務器可以在任何時刻向我們的web頁面推送數(shù)據(jù)和信息.這些被推送進來的信息可以在這個頁面上作為事件/數(shù)據(jù)來處理。服務器推送事件(Server-Sent Events)的優(yōu)點在于： 只要響應的內(nèi)容類型是事件/數(shù)據(jù)流，事件就通過HTTP發(fā)送，瀏覽器能夠識別該傳輸。
10、 Web Notifications API即web消息提醒，它可以使頁面可以發(fā)出通知，通知將被顯示在頁面之外的系統(tǒng)層面上（通常使用操作系統(tǒng)的標準通知機制，但是在不同的平臺和瀏覽器上的表現(xiàn)會有差異）。這個功能使 web 應用可以向用戶發(fā)送信息，即使應用處于空閑狀態(tài)。最明顯的用例之一是一個網(wǎng)頁版電子郵件應用程序，每當用戶收到了一封新的電子郵件都需要通知用戶，即使用戶正在使用另一個應用程序。在2013年夏天，這個API還是在被W3C在試用，并沒有被很多瀏覽器所應用。
11、 Web Sockets API：Web Sockets是一種基于 ws 協(xié)議的技術(shù)，它使得建立全雙工連接成為可能。websocket 常見于瀏覽器中，但是這個協(xié)議不受使用平臺的限制。它允許你收發(fā)信息到服務器端。這個典型的示例就是即時通信。你建立一個對話，如果沒有sockets，你可能會去從服務器中去獲取新的消息。如果具有了sockets，當消息通過瀏覽器發(fā)到服務端的時候，對方的客戶端通過已經(jīng)建立好的sockets鏈接就能自動的接收到信息。
12、 Web存儲，它有兩種版本,本地存儲和會話存儲。就WEB開發(fā)來說,一個會話就是你通過瀏覽器與服務器之間的一次通話，所以,如果你熟悉服務器端web開發(fā),會話存儲可能不是頭一次聽說。基本上,只要用戶頁在頁面上的統(tǒng)一個會話內(nèi)，工作數(shù)據(jù)就不會丟失。如果瀏覽器關(guān)閉或者轉(zhuǎn)向另一個會話，那么此時數(shù)據(jù)就不復存在。本地存儲在不同會話之間仍然能保存數(shù)據(jù), 本地存儲與cookie 和IndexedDB相比，它可以讓你來貯存更多的信息。Web存儲與cookie,數(shù)據(jù)不發(fā)送到請求的服務器而是保存在客戶端。
這些都是HTML5中新加入的一些比較常用的功能API，如果你想要系統(tǒng)的了解HTML5的新功能，推薦你去一個叫做秒秒學的教程網(wǎng)站上看看，里面有專門的課程來講解HTML5中的新特性，希望對你有幫助。
重慶分公司
重慶分公司
