{"id":339,"date":"2014-10-15T15:14:29","date_gmt":"2014-10-15T07:14:29","guid":{"rendered":"http:\/\/www.daliane.com\/?p=339"},"modified":"2014-10-15T15:19:48","modified_gmt":"2014-10-15T07:19:48","slug":"font-face_you_hua_chu_li_ban_fa","status":"publish","type":"post","link":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/font-face_you_hua_chu_li_ban_fa\/","title":{"rendered":"@font-face\u4f18\u5316\u5904\u7406\u529e\u6cd5"},"content":{"rendered":"

\u4e0b\u9762\u7684\u8bed\u6cd5\u662f\u4f60\u5982\u4f55\u4f7f\u7528@ font-face\u7684\u3002\u9996\u5148\uff0c\u5b9a\u4e49\u65b0\u7684\u5b57\u4f53\u6240\u63d0\u4f9b\u7684\u540d\u79f0\u548c\u8bf4\u660e\u7684\u5b57\u4f53\u3002<\/p>\n

\n
\n
@font-face {\r\n    font-family: DeliciousRoman;\r\n    src: url('http:\/\/www.font-face.com\/fonts\/delicious\/Delicious-Roman.otf');\r\n}<\/pre>\n<\/div>\n
\u7136\u540e\u4f60\u5f15\u7528\u5b83\u3002<\/p>\n
\n
p {\r\n    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;\r\n}<\/pre>\n<\/div>\n
\u5c31\u662f\u8fd9\u6837\u3002<\/p>\n
\u5728\u524d\u9762\u7684\u4f8b\u5b50\u4e2d\u4f7f\u7528\u5916\u90e8\u6765\u6e90\u3002\u4f46\u662f\uff0c\u5982\u679c\u5c06\u5b57\u4f53\u6587\u4ef6\u662f\u5728\u60a8\u7684\u670d\u52a1\u5668\u4e0a\uff0c\u90a3\u4e48\u4f60\u53ef\u4ee5\u53c2\u8003\u4ee5\u4e0b\u7684\u65b9\u5f0f\uff1a<\/p>\n
\n
\n
@font-face {\r\n    font-family: DeliciousRoman;\r\n    src: url('\u2026\/Delicious-Roman.otf');\r\n}<\/pre>\n<\/div>\n
\u6b64\u5916\uff0c\u8fd8\u6709\u5176\u4ed6\u4e09\u4e2a\u5b57\u4f53\u5c5e\u6027\uff0c\u60a8\u5e94\u8be5\u77e5\u9053\u7684\u3002\u9996\u5148\u662ffont-stretch\uff0c\u60a8\u53ef\u4ee5\u8bbe\u5b9a\u7684\u5b57\u4f53\u4f1a\u88ab\u62c9\u4f38\uff0c\u201cnormal\u2019\u201d\u662f\u9ed8\u8ba4\u7684\u3002\u6b64\u5916\uff0c\u6709\u5b57\u4f53\u7684\u98ce\u683c\uff0c\u8ba9\u4f60\u7684\u5b57\u4f53\u662f\u659c\u6216\u659c\u4f53\u3002\u6700\u540e\uff0c\u8fd8\u6709\u5b57\u4f53\u7684\u91cd\u91cf\uff0c\u6700\u540e\u5b57\u4f53\u4e3a\u7c97\u4f53\uff0c\u7b49\u4f60\u53ef\u4ee5\u81ea\u5df1\u8bbe\u7f6e.<\/p>\n
\u7528\u4ee5\u4e0a\u65b9\u6cd5\uff0c\u53ef\u80fd\u5bfc\u81f4\u6d4f\u89c8\u5668\u5047\u6b7b\u3002\u6240\u4ee5\u53ef\u4ee5\u91c7\u7528\u4e0b\u9762\u7684\u65b9\u5f0f\uff0c\u7528js\u8fdb\u884c\u4f18\u5316\u3002<\/p>\n<\/div>\n<\/div>\n
1<\/span> function<\/span> lazyload() {<\/span><\/span>
\n 2<\/span> var<\/span> sRule1 <\/span>=<\/span>
\n<\/span> 3<\/span> “<\/span>@font-face {<\/span>“<\/span> +<\/span>
\n<\/span> 4<\/span> “<\/span> font-family: ‘Yanone’;<\/span>“<\/span> +<\/span>
\n<\/span> 5<\/span> “<\/span> src: url(‘\/bin\/resource.cgi?type=font&sleep=6’);<\/span>“<\/span> +<\/span>
\n<\/span> 6<\/span> “<\/span> src: local(‘Yanone’), <\/span>“<\/span> +<\/span>
\n<\/span> 7<\/span> “<\/span>url(‘\/bin\/resource.cgi?type=font&sleep=6’) <\/span>“<\/span> +<\/span>
\n<\/span> 8<\/span> “<\/span>format(‘truetype’);<\/span>“<\/span> +<\/span>
\n<\/span> 9<\/span> “<\/span>}<\/span>“<\/span>;
\n<\/span>10<\/span> 
\n<\/span>11<\/span> var<\/span> style1 <\/span>=<\/span> document.styleSheets[<\/span>0<\/span>];
\n<\/span>12<\/span> if<\/span> ( <\/span>“<\/span>function<\/span>“<\/span> ===<\/span> typeof<\/span>(style1.insertRule) ) {
\n<\/span>13<\/span> \/\/<\/span> Firefox, Safari, Chrome<\/span>
\n<\/span>14<\/span>  style1.insertRule(sRule1, <\/span>0<\/span>);
\n<\/span>15<\/span>  }
\n<\/span>16<\/span> else<\/span> if<\/span> ( <\/span>“<\/span>string<\/span>“<\/span> ===<\/span> typeof<\/span>(style1.cssText) ) {
\n<\/span>17<\/span> \/\/<\/span> IE<\/span>
\n<\/span>18<\/span>  style1.cssText <\/span>=<\/span> sRule1;
\n<\/span>19<\/span>  }
\n<\/span>20<\/span> }<\/span><\/span><\/p>\n
 <\/p>\n
 <\/p>\n