{"id":3427,"date":"2015-01-24T13:12:36","date_gmt":"2015-01-24T05:12:36","guid":{"rendered":"https:\/\/sdeno.com\/?p=3427"},"modified":"2015-11-12T15:15:36","modified_gmt":"2015-11-12T07:15:36","slug":"svg%e5%8f%96%e4%bb%a3%e4%bc%a0%e7%bb%9fpngjpg%e5%9b%be%e7%89%87%e6%a0%bc%e5%bc%8f","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=3427","title":{"rendered":"svg\u53d6\u4ee3\u4f20\u7edfpng\/jpg\u56fe\u7247\u683c\u5f0f"},"content":{"rendered":"<p>\u5728\u7ebf svg \u56fe\u6807 \u6587\u5b57\u56fe\u7247 \u6587\u5b57\u56fe\u6807 \u5b57\u4f53\u56fe\u7247 \u5b57\u4f53\u56fe\u6807 <a href=\"https:\/\/sdeno.com\/?p=3031\" target=\"_blank\">\u5b57\u4f53\u7b26\u53f7<\/a><\/p>\n<p>\u5728\u5236\u4f5c\u7f51\u7ad9\u7684\u65f6\u5019\uff0c\u7ed8\u5236\u4e00\u4e9b\u56fe\u6807\u6216\u8005\u56fe\u6848\u7684\u65f6\u5019\uff0c\u5f80\u5f80\u90fd\u4f1a\u60f3\u5230\u8981\u4f7f\u7528\u56fe\u7247\u6765\u4ee3\u66ff\uff0c\u6216\u8005\u5c06<a href=\"https:\/\/sdeno.com\/?p=3421\" target=\"_blank\">\u56fe\u7247\u62fc\u63a5<\/a>\u5728\u4e00\u8d77\u5728\u4f7f\u7528CSS\u5b9a\u4f4d\u6765\u627e\u5230\u3002\u5176\u5b9e\u968f\u7740\u6280\u672f\u7684\u8fdb\u6b65\u5df2\u7ecf\u662f\u4f7f\u7528svg\u6765\u53d6\u4ee3\u4f20\u7edfpng\/jpg\u56fe\u7247\u683c\u5f0f\u3002<\/p>\n<p>svg\u53ef\u4ee5\u7528css\u6765\u4fee\u6539\u5c31\u50cf\u8bbe\u7f6efont\u5b57\u4f53\u4e00\u6837\u7b80\u5355\u5feb\u6377\u3002<\/p>\n<p>\u8fd9\u91cc\u4ecb\u7ecd\u4e00\u4e2a\u56fd\u5916\u5f3a\u5927\u7684\u5728\u7ebf\u751f\u6210svg\u7f51\u7ad9\uff0c\u53ef\u4ee5\u81ea\u5b9a\u4e49\u81ea\u5df1\u9700\u8981\u7684svg\u5e76\u4e14\u8fd8\u5e2e\u6211\u4eec\u751f\u6210\u4e86eot\uff0cwoff\uff0cttf\uff0csvg\u5168\u9762\u7684\u5b57\u4f53\u683c\u5f0f\u3002\u4f60\u4e5f\u53ef\u4ee5\u81ea\u5df1\u5236\u4f5c\u4e00\u4e2asvg\u683c\u5f0f\u7684\u6587\u4ef6\u4e0a\u4f20\u5e76\u9009\u4e2d\u65f6\u4e0b\u8f7d\u5f97\u5230\u7684\u5b57\u4f53\u6587\u4ef6\u4e5f\u4f1a\u5e2e\u6211\u4eec\u7684svg\u5408\u5e76\u5230\u91cc\u9762\uff0c\u5f88\u5f3a\u5927\u3002<\/p>\n<p><a href=\"https:\/\/icomoon.io\/app\/\" target=\"_blank\">https:\/\/icomoon.io\/app\/<\/a><\/p>\n<p>\u56fd\u5185\uff1a<a href=\"http:\/\/iconfont.cn\/\" target=\"_blank\">http:\/\/iconfont.cn\/<\/a><\/p>\n<p>\u5236\u4f5csvg\u6559\u7a0b\uff1a<a href=\"http:\/\/iconfont.cn\/help\/platform.html\" target=\"_blank\">http:\/\/iconfont.cn\/help\/platform.html<\/a><\/p>\n<p>\u7b80\u5355\u4e86\u89e3\u4e0b\u6d4f\u89c8\u5668\u652f\u6301\u548c\u517c\u5bb9\u7684\u5b57\u4f53\u683c\u5f0f<\/p>\n<p><strong>\u5b57\u4f53\u6587\u4ef6\u683c\u5f0f<\/strong><\/p>\n<a href=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style.jpg\"><figure class=\"mdx-lazyload-container\" style=\"max-width:789px\"><div style=\"padding-top:60.836501901141%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"789\" height=\"480\" class=\"alignnone size-full wp-image-3428 lazyload\" title=\"font_style\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style.jpg\" alt=\"font_style\" data-srcset=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style.jpg 789w, https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style-300x182.jpg 300w, https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style-624x379.jpg 624w\" sizes=\"auto, (max-width: 789px) 100vw, 789px\"><\/figure><\/a>\n<p>&nbsp;<\/p>\n<p><strong>\u6d4f\u89c8\u5668\u5bf9\u5b57\u4f53\u652f\u6301\u60c5\u51b5<\/strong><\/p>\n<p>&nbsp;<\/p>\n<a href=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style2.jpg\"><figure class=\"mdx-lazyload-container\" style=\"max-width:814px\"><div style=\"padding-top:35.257985257985%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"814\" height=\"287\" class=\"alignnone size-full wp-image-3429 lazyload\" title=\"font_style2\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style2.jpg\" alt=\"font_style2\" data-srcset=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style2.jpg 814w, https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style2-300x105.jpg 300w, https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style2-624x220.jpg 624w\" sizes=\"auto, (max-width: 814px) 100vw, 814px\"><\/figure><\/a>\n<p>&nbsp;<\/p>\n<p>\u5bf9\u4e8e\u5b57\u4f53\u7684\u52a0\u8f7d\u5fc5\u987b\u8981\u4f7f\u7528@font-face\u5c5e\u6027<\/p>\n<p>&nbsp;<\/p>\n<a href=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style3.jpg\"><figure class=\"mdx-lazyload-container\" style=\"max-width:790px\"><div style=\"padding-top:44.050632911392%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"790\" height=\"348\" class=\"alignnone size-full wp-image-3430 lazyload\" title=\"font_style3\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style3.jpg\" alt=\"font_style3\" data-srcset=\"https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style3.jpg 790w, https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style3-300x132.jpg 300w, https:\/\/sdeno.com\/wp-content\/uploads\/2015\/01\/font_style3-624x274.jpg 624w\" sizes=\"auto, (max-width: 790px) 100vw, 790px\"><\/figure><\/a>\n<p>&nbsp;<\/p>\n<p>\u8fd9\u91cc\u7b80\u5355\u8bf4\u660e\u4e0b\u4f7f\u7528\u65b9\u6cd5\uff0c\u5f53\u6211\u4eec\u4e0b\u8f7d\u5230\u538b\u7f29\u5305\u65f6\u5019\u6211\u4eec\u53ea\u9700\u8981fonts\u6587\u4ef6\u5939\u3002<\/p>\n<p>\u5177\u4f53\u4f7f\u7528\u8981\u5148\u52a0\u8f7dfont\u5b57\u4f53\u683c\u5f0f\uff1a<\/p>\n<pre>@font-face{\r\n  font-family: 'icomoon';\r\n  src:url('fonts\/icomoon.eot');\r\n  src:url('fonts\/icomoon.eot?#iefix') format('embedded-opentype'),\r\n  url('fonts\/icomoon.woff?jq8oyj') format('woff'),\r\n  url('fonts\/icomoon.ttf?jq8oyj') format('truetype'),\r\n  url('fonts\/icomoon.svg?jq8oyj#icomoon') format('svg');\r\n  font-weight: normal;\r\n  font-style: normal;\r\n}<\/pre>\n<p>\u7136\u540e\u5728\u6211\u4eec\u9700\u8981\u5b58\u653e\u5b57\u4f53\u7684\u6807\u7b7e\u51fa\u8bbe\u7f6ecss\u5982\u4e0b\uff1a<\/p>\n<pre>div{ width:140px; height:138px; border:1px solid red; display:block;\r\n    font-family: 'icomoon';\r\n    speak: none;\r\n    font-style: normal;\r\n    font-weight: normal;\r\n    font-variant: normal;\r\n    text-transform: none;\r\n    font-size: 24px;\r\n   -webkit-font-smoothing: antialiased;\r\n   -moz-osx-font-smoothing: grayscale;\r\n }<\/pre>\n<p>html\uff1a \uff08\u4e0b\u8f7d\u5230\u7684\u538b\u7f29\u5305\u90fd\u4f1a\u6709demo.html\u90e8\u5206\u91cc\u9762\u63d0\u4f9b\u7684\u6570\u5b57\u524d\u9762\uff0c\u6570\u5b57\u5bf9\u5e94\u56fe\u7247\u9700\u8981&amp;#x+\u6570\u5b57\uff09<\/p>\n<pre>&lt;div class=\"ico\"&gt;&amp;#xe600;&lt;\/div&gt;<\/pre>\n<p>\u7b80\u5355\u7684\u5728\u672c\u5730\u505a\u4e2a\u6d4b\u8bd5\u53ef\u4ee5\u5b8c\u7f8e\u517c\u5bb9\u4e07\u6076\u7684IE6\u3002<\/p>\n<p>\u5982\u679c\u4e0d\u8003\u8651IE6\/7\uff0c\u53ef\u4ee5\u4f7f\u7528:before :after \u00a0content:&#8221;&#8221; \u6dfb\u52a0\u5c0f\u56fe\u6807\u8fd9\u6837\u80fd\u4fdd\u8bc1\u4ee3\u7801\u7684\u7b80\u6d01\u3002\u4f8b\u5982\uff1a<\/p>\n<pre>.ico:before{\r\n  content:\"\\e600\";\r\n}\r\n.ico:hover{\r\n  content:\"\\e600\";\r\n  color:red;\r\n}<\/pre>\n<p>\u8fd9\u6837\u5c31\u6ca1\u6709\u5fc5\u8981\u5728html\u4e2d\u5728\u53bb\u6dfb\u52a0<\/p>\n<pre>&amp;#xe600;<\/pre>\n<p><a href=\"https:\/\/sdeno.com\/zp\/icomoon\/demo.html\" target=\"_blank\">https:\/\/sdeno.com\/zp\/icomoon\/demo.html<\/a><\/p>\n<p><a href=\"https:\/\/sdeno.com\/zp\/icomoon\/index.html\" target=\"_blank\">https:\/\/sdeno.com\/zp\/icomoon\/index.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5728\u7ebf svg \u56fe\u6807 \u6587\u5b57\u56fe\u7247 \u6587\u5b57\u56fe\u6807 \u5b57\u4f53\u56fe\u7247 \u5b57\u4f53\u56fe\u6807 \u5b57\u4f53\u7b26\u53f7 \u5728\u5236\u4f5c\u7f51\u7ad9\u7684\u65f6\u5019\uff0c\u7ed8\u5236\u4e00\u4e9b\u56fe\u6807\u6216\u8005\u56fe\u6848\u7684 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,11],"tags":[],"class_list":["post-3427","post","type-post","status-publish","format-standard","hentry","category-css","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/3427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3427"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/3427\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}