{"id":1055,"date":"2019-09-26T16:45:25","date_gmt":"2019-09-26T08:45:25","guid":{"rendered":"http:\/\/jilin.hydesign.tw\/?p=1055"},"modified":"2022-03-18T17:10:24","modified_gmt":"2022-03-18T09:10:24","slug":"css-fonts","status":"publish","type":"post","link":"http:\/\/jilin.hydesign.tw\/index.php\/2019\/09\/26\/css-fonts\/","title":{"rendered":"CSS Fonts \u6587\u5b57"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Font Size<\/h2>\n\n\n\n<p>px\u3001em\u3001rem \u3001 %<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>px<\/strong><\/td><td>\u7d55\u5c0d\u55ae\u4f4d\uff0c\u87a2\u5e55\u300c\u9ede\u300d\/ pixel  (1px = 1\/96th of 1in)<\/td><\/tr><tr><td><strong>em<\/strong><\/td><td>\u76f8\u5c0d\u55ae\u4f4d\uff0c\u300c\u500d\u6578\u300d\u4e58\u4ee5\u7236\u5143\u7d20\u7684 px \u503c\u3002 <\/td><\/tr><tr><td><strong>rem<\/strong><\/td><td>\u76f8\u5c0d\u55ae\u4f4d\uff0c\u300c\u500d\u6578\u300d\u4e58\u4ee5\u6839\u5143\u7d20\u7684 px \u503c\u3002<\/td><\/tr><tr><td><strong> %<\/strong><\/td><td>\u76f8\u5c0d\u55ae\u4f4d\uff0c\u300c\u767e\u5206\u6bd4\u300d\u4e58\u4ee5\u7236\u5143\u7d20\u7684 px \u503c\u3002<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>\u5c0d\u7167Font\u55ae\u4f4d<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>medium<\/strong><\/td><td>\u9810\u8a2d\u503c\uff0c16px ( h4 \u9810\u8a2d\u503c )<\/td><\/tr><tr><td><strong>xx-small<\/strong><\/td><td>medium  * 0.6  ( h6 \u9810\u8a2d\u503c )<\/td><\/tr><tr><td><strong>x-small<\/strong><\/td><td>medium  *  0.75 <\/td><\/tr><tr><td><strong>small<\/strong><\/td><td>medium  *  0.8 ( h5 \u9810\u8a2d\u503c\uff0cW3C \u5b9a\u7fa9\u70ba 0.89\uff0c\u5be6\u6e2c\u7d04\u70ba 0.8 )<\/td><\/tr><tr><td><strong>large<\/strong><\/td><td>medium  *  1.1 ( h3 \u9810\u8a2d\u503c\uff0cW3C \u5b9a\u7fa9\u70ba 1.2\uff0c\u5be6\u6e2c\u7d04\u70ba 1.1 )<\/td><\/tr><tr><td><strong>x-large<\/strong><\/td><td>medium  *  1.5 ( h2 \u9810\u8a2d\u503c )<\/td><\/tr><tr><td><strong>xx-large<\/strong><\/td><td>medium  *  2<\/td><\/tr><tr><td><strong>smaller<\/strong><\/td><td>\u7236\u5c64\u7684 80%<\/td><\/tr><tr><td><strong>larger<\/strong><\/td><td>\u7236\u5c64\u7684 120%<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<pre id=\"tw-target-text\" class=\"wp-block-preformatted\"><strong>\u7d55\u5c0d\u5927\u5c0f\u503c<\/strong><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>CSS absolute-size values<\/th><th>xx-small<\/th><th>x-small<\/th><th>small<\/th><th>medium<\/th><th>large<\/th><th>x-large<\/th><th>xx-large<\/th><th>&nbsp;<\/th><\/tr><tr><th>scaling factor<\/th><td>3\/5<\/td><td>3\/4<\/td><td>8\/9<\/td><td>1<\/td><td>6\/5<\/td><td>3\/2<\/td><td>2\/1<\/td><td>3\/1<\/td><\/tr><tr><th>HTML headings<\/th><td>h6<\/td><td>&nbsp;<\/td><td>h5<\/td><td>h4<\/td><td>h3<\/td><td>h2<\/td><td>h1<\/td><td>&nbsp;<\/td><\/tr><tr><th>HTML font sizes<\/th><td>1<\/td><td>&nbsp;<\/td><td>2<\/td><td>3<\/td><td>4<\/td><td>5<\/td><td>6<\/td><td>7<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>\u5c0d\u7167\u5370\u5237\u55ae\u4f4d<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>pt<\/strong><\/td><td>\u5370\u5237\u6a5f\u300c\u9ede\u300d\/ points (1pt = 1\/72 of 1in)<br>72 dpi \/ 1px = 1pt<br>96 dpi \/ 1px = 0.75 pt ( 72\/96 = 0.75 )<\/td><\/tr><tr><td><strong>pc<\/strong><\/td><td>picas (1pc = 12pt)<\/td><\/tr><tr><td> <strong>in<\/strong><\/td><td>\u82f1\u540b \/ inches (96dpi \/  1in = 96px = 2.54cm)<\/td><\/tr><tr><td><strong>cm<\/strong><\/td><td>\u516c\u5206 \/ centimeters (96dpi \/ 1cm = 37.795275593333px)<\/td><\/tr><tr><td><strong>mm<\/strong><\/td><td>\u516c\u91d0 \/ millimeters (96dpi \/ 1cm = 3.7795275593333px)<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">text-justify<\/h2>\n\n\n\n<p>\u5b57\u5143\u5de6\u53f3\u5c0d\u9f4a<br>text-justify: auto;<br>text-justify: newspaper;<br>text-justify: distribute;<br>text-justify: distribute-all-lines;<br>text-justify: inter-word;<br>text-justify: inter-cluster;<br>text-justify: inter-ideograph;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">div {\n  text-align:justify;\n  text-justify:inter-ideograph;\n  -moz-text-align-last:justify;\/*ff*\/\n  -webkit-text-align-last:justify;\/*chrome 20+*\/\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">text-decoration<\/h2>\n\n\n\n<p>\u5b57\u5143\u5e95\u7dda<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">h1 {\n  text-decoration: overline; \/*\u4e0a\u5e95\u7dda*\/\n}\n\nh2 {\n  text-decoration: line-through;\/*\u522a\u9664\u7dda*\/\n}\n\nh3 {\n  text-decoration: underline;\/*\u4e0b\u5e95\u7dda*\/\n}\n\na {\n  text-decoration: none;\/*\u522a\u9664\u4e0b\u5e95\u7dda*\/\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">text-indent<\/h2>\n\n\n\n<p>\u5b57\u5143\u7b2c\u4e00\u884c\u7e2e\u6392<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">p {\n  text-indent: 50px;\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">letter-spacing<\/h2>\n\n\n\n<p>\u5b57\u5143\u9593\u8ddd<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">h1 {\n  letter-spacing: 3px;\n}\n\nh2 {\n  letter-spacing: -3px;\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">word-spacing<\/h2>\n\n\n\n<p>\u55ae\u53e5\u9593\u8ddd<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">h1 {\n  word-spacing: 10px;\n}\n\nh2 {\n  word-spacing: -5px;\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">line-height<\/h2>\n\n\n\n<p>\u884c\u9ad8<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">p.small {\n  line-height: 0.8;\n}\n\np.big {\n  line-height: 1.8;\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">word-wrap<\/h2>\n\n\n\n<p>\u82f1\u6587\u5b57\u5143\u65b7\u884c<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.break-word {\n   word-wrap: break-word;\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">::first-line<\/h2>\n\n\n\n<p>\u6bb5\u843d\u7b2c\u4e00\u884c\u5957\u7528\u6548\u679c<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">p::first-line {\n  color: #ff0000;\n  font-variant: small-caps;\n}<\/pre>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Word-break<\/h2>\n\n\n\n<p>\u82f1\u6587\u5b57\u5143\u65b7\u884c<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.break-word {\n   word-wrap: break-word;\n}<\/pre>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Font Size px\u3001em\u3001rem \u3001 % px \u7d55\u5c0d\u55ae\u4f4d\uff0c\u87a2\u5e55\u300c\u9ede\u300d\/ pixel (1px = 1\/9&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,12,4],"tags":[],"class_list":["post-1055","post","type-post","status-publish","format-standard","hentry","category-css","category-front-end","category-notes"],"_links":{"self":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/comments?post=1055"}],"version-history":[{"count":61,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1055\/revisions"}],"predecessor-version":[{"id":6958,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/posts\/1055\/revisions\/6958"}],"wp:attachment":[{"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/media?parent=1055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/categories?post=1055"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jilin.hydesign.tw\/index.php\/wp-json\/wp\/v2\/tags?post=1055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}