如何在HTML中使用WOFF条码网页字体 web开发中怎么引用woff字体
\u5982\u4f55\u5728HTML\u4e2d\u4f7f\u7528WOFF\u6761\u7801\u7f51\u9875\u5b57\u4f53\u524d\u63d0\u662f\u4f60\u5f97\u4e0b\u8f7d\u5b57\u4f53\uff0c\u6216\u8005\u5728css\u6587\u4ef6\u91cc@import \u5f15\u5165\u8fd9\u79cd\u5b57\u4f53
@font-face
{
font-family: WOFF;
src: url('WOFF.ttf'),
url('WOFF.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
WOFF\u662f\u4e07\u7ef4\u7f51\u8054\u76df\uff08W3C\uff09\u63a8\u8350\u7684\u4e00\u79cd\u7f51\u9875\u5b57\u4f53\u683c\u5f0f\uff0c\u5b83\u80fd\u540c\u65f6\u517c\u5bb9\u5305\u62ec\u6700\u65b0\u7248\u7684IE\u3001\u706b\u72d0\u3001\u8c37\u6b4c\u3001\u82f9\u679c\u4ee5\u53caOpera\u7b49\u4f17\u591a\u6d4f\u89c8\u5668\u3002\u7f51\u9875\u5b57\u4f53\u4f7f\u5f97\u7f51\u7ad9\u76f8\u5173\u4eba\u5458\u53ef\u4ee5\u5efa\u7acb\u4ee5\u7f51\u7ad9\u4e3a\u57fa\u7840\u7684\u4e00\u4e9b\u5e94\u7528\uff0c\u6bd4\u5982\u6761\u7801\u3001MICR\u548cOCR\u7b49\u800c\u4e0d\u9700\u8981\u5728\u7ec8\u7aef\u673a\u5668\u4e0a\u5b89\u88c5\u76f8\u5173\u5b57\u4f53\u3002\u800c\u7531\u4e8e\u6761\u7801\u5b57\u4f53\u7684\u7075\u6d3b\u6027\uff0c\u5176\u5728\u7f51\u9875\u4e2d\u7684\u4f7f\u7528\u9891\u7387\u66f4\u52a0\u9891\u7e41\u3002
IDAutomation\u65d7\u4e0b\u7684\u6761\u7801\u5b57\u4f53\u5305\u90fd\u5305\u62ecWOFF\u5b57\u4f53\u683c\u5f0f\uff0c\u540c\u65f6\u8fd8\u5305\u62ecEOT\u548cSVG\u5b57\u4f53\u4ee5\u517c\u5bb9\u8001\u7248\u7684\u6d4f\u89c8\u5668\u3002\u5982\u4f55\u5c06\u8fd9\u4e9b\u6761\u7801\u5b57\u4f53\u4f7f\u7528\u5230\u7f51\u9875\u91cc\u9762\u53bb\uff1f\u9996\u5148\u9700\u8981\u6ce8\u610f\u7684\u4e00\u70b9\u662f\uff1a\u7f51\u9875\u5b57\u4f53\u5728\u7528\u6237\u6d4f\u89c8\u7f51\u9875\u65f6\u81ea\u52a8\u4e0b\u8f7d\uff0c\u5f53\u5176\u79bb\u5f00\u7f51\u9875\u540e\u53c8\u81ea\u52a8\u4e22\u5f03\uff0c\u6240\u4ee5\u8fd9\u4e9b\u5b57\u4f53\u4e0d\u80fd\u7528\u4f5c\u5176\u4ed6\u4efb\u4f55\u7528\u9014\u3002\u4e0b\u9762\u5c31\u6559\u5927\u5bb6\u5982\u4f55\u5728HTML\u91cc\u4f7f\u7528WOFF\u6761\u7801\u5b57\u4f53\u683c\u5f0f\uff1a
\u628a\u5b57\u4f53\u4e0a\u4f20\u5230\u4f60\u7684CSS\u6587\u4ef6\u5939\u91cc\u6216\u8005\u662f\u76f8\u540c\u7684\u76ee\u5f55\u4e0b\u3002\u5305\u62ecIE\u3001\u706b\u72d0\u5728\u5185\u7684\u5927\u591a\u6570\u6d4f\u89c8\u5668\u90fd\u8981\u6c42\u5b57\u4f53\u6240\u5728\u7684\u57df\u540d\u662f\u4ed6\u4eec\u6240\u6258\u7ba1\u7684\u3002
\u5728CSS @font-face declaration\u91cc\u7528\u5b8c\u6574\u7684URL\u5bf9\u5e94\u5177\u4f53\u7684\u5b57\u4f53\u6587\u4ef6\u7684\u5f62\u5f0f\u6765\u5b9a\u4e49\u5b57\u4f53\uff0c\u5982\u4e0b\uff1a
\u5f15\u7528\u5b57\u4f53\uff1a(WOFF-FONT)
\u5b9e\u65bd\u57df\u540d\u9650\u5236\uff0c\u5b57\u4f53\u5728\u6d4f\u89c8\u5668\u91cc\u51fa\u73b0\u3002
首先，在html中引入字体是css3新添加的属性，并不是所有的浏览器都兼容，这个只需要在css文件中引入类似如下代码就可以了
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot'); /* IE9+ */
font-weight:bold;
}
具体请参考http://www.w3school.com.cn/css3/css3_font.asp
WOFF是万维网联盟（W3C）推荐的一种网页字体格式，它能同时兼容包括最新版的IE、火狐、谷歌、苹果以及Opera等众多浏览器。网页字体使得网站相关人员可以建立以网站为基础的一些应用，比如条码、MICR和OCR等而不需要在终端机器上安装相关字体。而由于条码字体的灵活性，其在网页中的使用频率更加频繁。
IDAutomation旗下的条码字体包都包括WOFF字体格式，同时还包括EOT和SVG字体以兼容老版的浏览器。如何将这些条码字体使用到网页里面去？首先需要注意的一点是：网页字体在用户浏览网页时自动下载，当其离开网页后又自动丢弃，所以这些字体不能用作其他任何用途。下面就教大家如何在HTML里使用WOFF条码字体格式：
把字体上传到你的CSS文件夹里或者是相同的目录下。包括IE、火狐在内的大多数浏览器都要求字体所在的域名是他们所托管的。
在CSS @font-face declaration里用完整的URL对应具体的字体文件的形式来定义字体，如下：
<STYLE TYPE="text/css"> <!-- /* include the idautomation.com Code39 WOFF Font -- */ @font-face { font-family: IDAutomationHC39M; src: url(http://www.idautomation.com/barcode-fonts/woff-web-fonts/IDAutomationHC39M.woff); } --> </STYLE>
引用字体：<font face="IDAutomationHC39M">(WOFF-FONT)</font>
实施域名限制，字体在浏览器里出现。
绛旓細1銆乥ackground-color:#000;鍘绘帀灏卞彲浠ユ樉绀哄浘鐗囷紝鍥犱负鍓嶉潰浣犺缃簡鑳屾櫙鍥剧墖锛屽悗闈㈠張璁剧疆鑳屾櫙棰滆壊锛岃鐩栦簡銆2銆佸瓧浣擄紝浣犲彲浠鐢Dreamweaver缂栬緫浠ｇ爜锛閲岄潰鐨css鏈夊彲閫夊瓧浣擄細涓婇潰鏁拌锛屽鏋滄病浣犲枩娆㈢殑锛屼笅闈⑩滅紪杈戝瓧浣撳垪琛ㄢ濅篃搴旇鏈夈備笉杩囨湁涓鐐瑰彲浠ヨ偗瀹氾紝涓嶅悓鐨勬祻瑙堝櫒鍗充娇浣犺缃簡鍚屾牱鐨勫瓧浣擄紝鏄剧ず鐨勬晥鏋滀篃涓...
绛旓細html5涓嶇敤font涓哄瓧浣撹缃鑹茬殑鏂规硶锛1銆佸畾涔夎璁剧疆鐨勬枃瀛楄寖鍥达紝骞剁敤span鏍囩鍖呭洿 2銆佺紪鍐檚pan鐨刢lass锛屽畾涔塩olor灞炴с俬tml浠ｇ爜濡備笅锛<p>杩欐槸涓涓祴璇 <span class="redText">棰滆壊</span> 鐨勪緥瀛</p> css缂栧啓濡備笅锛.redText { color: red;} 杩愯鏁堟灉锛...
绛旓細瀛椾綋鐨勬牸寮忛兘瀹氫箟濂戒簡锛岃偗瀹氬緱寮曠敤浜嗐傛瘮濡傛垜鍦╤tml涓锛屾湁涓涓猦1鏍囩闇瑕佺敤鍒拌繖涓壒娈婂瓧浣擄紝閭ｄ箞灏辫窡鏅歠ont-family涓鏍风殑鍋氭硶浜嗐俬1 { font-family: '瀛椾綋鍚嶇О'; font-size: 36px; color: #666;} 5/5 绗叚姝ワ細鎵撳紑鍒氬垰杩愯浜嗕竴鍗婄殑node.js杩愯绐楀彛锛屽鍒...
绛旓細娌℃湁鐢ㄦ埛浼氭案杩滅瓑寰呬綘鐨Loading鈥斺HTML5浼氶氳繃XMLHttpRequest2绛夋妧鏈紝甯姪鎮ㄧ殑Web搴旂敤鍜岀綉绔欏湪澶氭牱鍖栫殑鐜涓洿蹇熺殑宸ヤ綔銆侰SS3鐗规(Class: CSS3)鍦ㄤ笉鐗虹壊鎬ц兘鍜岃涔夌粨鏋勭殑鍓嶆彁涓嬶紝CSS3涓彁渚涗簡鏇村鐨勯鏍煎拰鏇村己鐨勬晥鏋溿傛澶栵紝杈冧箣浠ュ墠鐨刉eb鎺掔増锛學eb鐨勫紑鏀惧瓧浣撴牸寮忥紙WOFF锛変篃鎻愪緵浜嗘洿楂樼殑鐏垫椿鎬у拰...
绛旓細鍦ㄤ笉鐗虹壊鎬ц兘鍜岃涔夌粨鏋鐨鍓嶆彁涓,CSS3涓彁渚涗簡鏇村鐨勯鏍煎拰鏇村己鐨勬晥鏋溿傛澶,杈冧箣浠ュ墠鐨刉eb鎺掔増,Web鐨勫紑鏀惧瓧浣撴牸寮(WOFF)涔熸彁渚涗簡鏇撮珮鐨勭伒娲绘у拰鎺у埗鎬сHtml 5涓嶩tml 4鐨勫尯鍒 A.绠鍖栫殑璇硶 鏇寸畝鍗曠殑doctype澹版槑鏄HTML5閲浼楀鏂扮壒寰佷箣涓銆傜幇鍦ㄤ綘鍙渶瑕佸啓,杩欏氨琛屼簡銆侶TML5鐨勮娉曞吋瀹笻TML4鍜孹HTML1,浣嗕笉鍏煎SGM...
绛旓細鍥炵瓟锛HTML5鐨璁捐鐩殑鏄负浜嗗湪绉诲姩璁惧涓婃敮鎸佸濯掍綋銆傛柊鐨勮娉曠壒寰佽寮曡繘浠ユ敮鎸佽繖涓鐐,濡倂ideo銆乤udio鍜宑anvas 鏍囪銆侶TML5杩樺紩杩涗簡鏂扮殑鍔熻兘,鍙互鐪熸鏀瑰彉鐢ㄦ埛涓庢枃妗ｇ殑浜や簰鏂瑰紡,鍖呮嫭鏂扮殑瑙ｆ瀽瑙勫垯澧炲己浜嗙伒娲绘с佹柊灞炴с佹窐姹拌繃鏃剁殑鎴栧啑浣欑殑灞炴х瓑銆 DIV+CSS鏄綉绔欐爣鍑嗕腑甯哥敤鏈涔嬩竴,div+css 鏄竴绉嶇綉椤电殑...
绛旓細娌℃湁鐢ㄦ埛浼氭案杩滅瓑寰呬綘鐨Loading鈥斺HTML5浼氶氳繃XMLHttpRequest2绛夋妧鏈紝甯姪鎮ㄧ殑Web搴旂敤鍜岀綉绔欏湪澶氭牱鍖栫殑鐜涓洿蹇熺殑宸ヤ綔銆侰SS3鐗规(Class: CSS3)鍦ㄤ笉鐗虹壊鎬ц兘鍜岃涔夌粨鏋勭殑鍓嶆彁涓嬶紝CSS3涓彁渚涗簡鏇村鐨勯鏍煎拰鏇村己鐨勬晥鏋溿傛澶栵紝杈冧箣浠ュ墠鐨刉eb鎺掔増锛學eb鐨勫紑鏀惧瓧浣撴牸寮忥紙WOFF锛変篃鎻愪緵浜嗘洿楂樼殑鐏垫椿鎬у拰...
绛旓細杩欐槸鍥犱负鐏嫄閽堝璺ㄥ煙璧勬簮寮曠敤鏂归潰鐨闄愬埗鎵鑷淬傝В鍐冲姙娉曢渶瑕佷慨鏀圭伀鐙愭祻瑙堝櫒鐨勮缃傝繘鍏bout:config锛屾壘鍒皊ecurity.fileuri.strict_origin_policy锛屽皢鍏惰缃负false鍚庨噸鍚祻瑙堝櫒鍗冲彲浣跨敤銆
绛旓細HTML5浼氶氳繃XMLHttpRequest2绛夋妧鏈紝瑙ｅ喅浠ュ墠鐨勮法鍩熺瓑闂锛屽府鍔╂偍鐨刉eb搴旂敤鍜岀綉绔欏湪澶氭牱鍖栫殑鐜涓洿蹇熺殑宸ヤ綔銆8.CSS3鐗规(Class: CSS3)鍦ㄤ笉鐗虹壊鎬ц兘鍜岃涔夌粨鏋勭殑鍓嶆彁涓嬶紝CSS3涓彁渚涗簡鏇村鐨勯鏍煎拰鏇村己鐨勬晥鏋溿傛澶栵紝杈冧箣浠ュ墠鐨刉eb鎺掔増锛學eb鐨勫紑鏀惧瓧浣撴牸寮(WOFF)涔熸彁渚涗簡鏇撮珮鐨鐏垫椿鎬у拰鎺у埗鎬с
绛旓細涓夌淮銆佸浘褰㈠強鐗规晥鐗规э紝鍩轰簬SVG銆丆anvas銆乄ebGL鍙奀SS3鐨3D鍔熻兘锛岀敤鎴蜂細鎯婂徆浜庡湪娴忚鍣ㄤ腑锛屾墍鍛堢幇鐨勬儕浜鸿瑙夋晥鏋溿侰SS3鐗规э紝鍦ㄤ笉鐗虹壊鎬ц兘鍜岃涔夌粨鏋勭殑鍓嶆彁涓嬶紝CSS3涓彁渚涗簡鏇村鐨勯鏍煎拰鏇村己鐨勬晥鏋溿傛澶栵紝杈冧箣浠ュ墠鐨刉eb鎺掔増锛學eb鐨勫紑鏀惧瓧浣撴牸寮忥紙WOFF锛変篃鎻愪緵浜嗘洿楂樼殑鐏垫椿鎬у拰鎺у埗鎬с傜瓑绛夈傛讳箣锛HTML...
