網頁html中嵌入特殊字型(中文,英文)
阿新 • • 發佈:2019-01-27
英文字型引入方法:
html程式碼
<!DOCTYPE html> <html> <head> </head> <style> @font-face { font-family: 'fontNameRegular'; /* 字型名稱,可自己定義 */ src: url('LIGHRG.eot'); src: local('fontName Regular'), local('Lightningvolt'), url('LIGHRG.woff') format('woff'), url('LIGHRG.ttf') format('truetype'), url('LIGHRG.svg#LIGHRG') format('svg'); } /* 將Lightningvolt替換成字型庫名 */ /* 將LIGHRG替換成你自己的字型檔名 */ p {font: 50px fontNameRegular, Arial, sans-serif; } </style> <body> <p> sadasdasdasdasdasdasdasd </p> </body> </html>
參考的文獻:
http://e.jbit.cn/newsInfo.action?identifier=81162
線上字型轉化網站(訪問不了請自行翻牆):
http://www.freefontconverter.com/
http://ttf2eot.sebastiankippe.com/
-----------------------------------------------------華麗的分割線------------------------------------------------------------
下面是中文方法
第一次執行好以後,再重新整理一下有在head插入一個svg,這個svg再轉成其他格式就可以了
注意:不能磁碟路徑訪問,一定要部署一個Apache或者tomcat,用localhost訪問頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div class="minijianyaya"> 我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達我們ahi速度額短襪打速度埃索達埃索達 </div> </body> <script type="text/javascript" src="http://www.youziku.com/UserDownFile/jquery.min.js"></script> <script type="text/javascript" src="http://www.youziku.com/UserDownFile/jquery.md5.js"></script> <script type="text/javascript"> function youziku19540() { var resultStr = $(".minijianyaya").text(); var md5 = ""; resultStr = Trim(resultStr); resultStr = SelectWord(resultStr); md5 = $.md5("9cddc9570e5e4a5d93d076e34bd55782"+"minijianyaya" + resultStr); $.getJSON("http://www.youziku.com/webfont/CSSPOST?jsoncallback=?", { "id": md5, "guid": "9cddc9570e5e4a5d93d076e34bd55782", "type": "5" }, function (json) { if (json.result == 0) {/*alert("需要生成");*/ $.post("http://www.youziku.com/webfont/PostCorsCreateFont", { "name": "minijianyaya", "gid": "9cddc9570e5e4a5d93d076e34bd55782", "type": "5", "text": resultStr }, function (json) { if (json == "0") { /*alert("引數不對");*/ } else if (json == "2") {/*alert("超過每日生成字型數的上限");*/ } else if (json == "3") { /*alert("當前正在生成請稍後");*/ } else {/*alert("正在生成");*/ } }); } else {/*alert("下載css檔案");*/ loadExtentFile("http://www.youziku.com/webfont/css?id=" + md5 + "&guid=" + "9cddc9570e5e4a5d93d076e34bd55782" + "&type=5"); } }); } (function youziku() { if (window.location.href.toString().substring(0, 7) == "file://") { alert("你當前是通過雙擊開啟html檔案,進行本地測試的,這樣看不到字型效果,一定要通過本地建立的虛擬網站或釋出到外網進行測試。詳見有字型檔的使用說明。"); }else{ youziku19540(); } })() </script> </html>
一些文獻:
http://jingyan.baidu.com/article/3065b3b6e9b2d9becff8a4c1.html
http://www.youziku.com/PersonalCenter/Trusteeship