{"id":8238,"date":"2018-12-09T16:35:40","date_gmt":"2018-12-09T08:35:40","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8238"},"modified":"2018-12-09T19:24:55","modified_gmt":"2018-12-09T11:24:55","slug":"css-font-feature-settings-keyword-value","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2018\/12\/css-font-feature-settings-keyword-value\/","title":{"rendered":"CSS font-feature-settings 50+\u5173\u952e\u5b57\u5c5e\u6027\u503c\u5b8c\u6574\u4ecb\u7ecd"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8238\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=8238<\/a><br \/>\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4e2a\u4eba\u7f51\u7ad9\u65e0\u9700\u6388\u6743\uff0c\u53ea\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\u5373\u53ef\uff0c\u4efb\u4f55\u7f51\u7ad9\u5747\u53ef\u6458\u8981\u805a\u5408\uff0c\u5546\u7528\u8bf7\u8054\u7cfb\u6388\u6743\u3002<\/p>\n<link rel=\"stylesheet\" href=\"\/study\/201812\/wp-ff.css\">\n<h3>\u4e00\u3001\u8fc7\u53bb\u4ecb\u7ecd\u7684\u51e0\u4e2afont\u76f8\u5173CSS\u5c5e\u6027<\/h3>\n<p>\u4e4b\u524d\u6709\u4ecb\u7ecd\u8fc7\u51e0\u4e2afont\u76f8\u5173\u7684CSS\u5c5e\u6027\uff0c<code>font-kerning<\/code>\uff0c<code>font-smoothing<\/code>\u4ee5\u53ca<code>font-variant<\/code>\uff0c\u6587\u7ae0\u94fe\u63a5\u4e3a\uff1a\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=5974\">\u4e86\u89e3CSS\u5c5e\u6027font-kerning,font-smoothing,font-variant<\/a>\u201d<span class=\"hidden\">&#8211; https:\/\/www.zhangxinxu.com\/wordpress\/?p=5974<\/span>\u3002<\/p>\n<p>\u672c\u6587\u8981\u4ecb\u7ecd\u7684\u5219\u662f\u4e0a\u9762\u94fe\u63a5\u6587\u7ae0\u6700\u540e\u63d0\u5230\u7684<code>font-feature-settings<\/code>\u5c5e\u6027\uff0cCSS <code>font-feature-settings<\/code>\u8bed\u6cd5\u5e76\u4e0d\u590d\u6742\uff0c\u53ea\u662f\u652f\u6301\u7684\u5173\u952e\u5b57\u5c5e\u6027\u503c\u4f55\u5176\u4f17\u591a\uff0c\u9700\u8981\u957f\u7bc7\u5927\u8bba\u4ecb\u7ecd\uff0c\u672c\u6587\u4f1a\u5c3d\u91cf\u7b80\u5316\uff0c\u4f46\u7bc7\u5e45\u4f9d\u7136\u4f1a\u5f88\u957f\uff0c\u63d0\u524d\u9884\u8b66\u3002<\/p>\n<p>\u5728\u5ea7\u7684\u8bf8\u4f4d\u6ca1\u5fc5\u8981\u6bcf\u4e00\u4e2a\u5c5e\u6027\u503c\u90fd\u719f\u77e5\uff0c\u4e86\u89e3<code>font-feature-settings<\/code>\u53ef\u4ee5\u505a\u4e9b\u4ec0\u4e48\u5c31\u53ef\u4ee5\u4e86\uff0c\u6709\u4e2a\u5370\u8c61\uff0c\u4ee5\u540e\u9047\u5230\u7c7b\u4f3c\u573a\u666f\uff0c\u8bb0\u5f97\u56de\u5230\u8fd9\u91cc\u627e\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n<h3>\u4e8c\u3001font-feature-settings\u6709\u4ec0\u4e48\u7528\uff1f<\/h3>\n<p>CSS <code>font-feature-settings<\/code>\u5c5e\u6027\u63a7\u5236OpenType\u5b57\u4f53\u4e2d\u7684\u9ad8\u7ea7\u6392\u7248\u529f\u80fd\uff0c\u4e5f\u5c31\u662f\u53ef\u4ee5\u8ba9OpenType\u5b57\u4f53\u6392\u7248\u66f4\u52a0\u7cbe\u81f4\uff0c\u7b26\u5408\u5b9e\u9645\u5f00\u53d1\u9700\u8981\u3002<\/p>\n<p>\u517c\u5bb9\u6027\u5f88\u4e0d\u9519\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-01_001654.png\" width=\"678\" height=\"279\" alt=\"font-feature-settings\u517c\u5bb9\u6027\u56fe\" class=\"alignnone size-medium\" \/><\/p>\n<p><code>font-feature-settings<\/code>\u8981\u60f3\u6709\u4f5c\u7528\uff0c\u5f80\u5f80\u9700\u8981\u5b57\u4f53\u672c\u8eab\u652f\u6301\uff0c\u56e0\u6b64\uff0c\u591a\u81ea\u5b9a\u4e49\u5b57\u4f53\u4e2d\u3002<\/p>\n<p>\u8bed\u6cd5\uff1a<\/p>\n<pre>font-feature-settings: normal | &lt;feature-tag-value&gt;;<\/pre>\n<p>\u5176\u4e2d\uff1a<\/p>\n<pre>&lt;feature-tag-value&gt; = &lt;string&gt; [ &lt;integer&gt; | on | off ]?<\/pre>\n<p>\u4f8b\u5982\uff1a<\/p>\n<pre><span style=\"color:green;\">\/* \u4f7f\u7528\u9ed8\u8ba4\u503c *\/<\/span>\r\nfont-feature-settings: normal;\r\n\r\n<span style=\"color:green;\">\/* \u4f7f\u7528 OpenType \u7279\u5f81\u6807\u7b7e *\/<\/span>\r\nfont-feature-settings: \"smcp\";\r\nfont-feature-settings: \"smcp\" on;\r\nfont-feature-settings: \"swsh\" 2;\r\nfont-feature-settings: \"smcp\", \"swsh\" 2;<\/pre>\n<p>\u800c\u672c\u6587\u8981\u8be6\u7ec6\u4ecb\u7ecd\u7684\uff0c\u5c31\u662f\u4e0a\u9762<code>\"smcp\"<\/code>\u548c<code>\"swsh\"<\/code>\u8fd9\u7c7bOpenType\u5b57\u4f53\u7279\u5f81\u6807\u7b7e\u3002<\/p>\n<p>OpenType\u5b57\u4f53\u7279\u5f81\u6807\u7b7e\u91c7\u7528\u6ce8\u518c\u5236\uff0c\u76ee\u524d\u5927\u591a\u6570\u7684\u6807\u7b7e\u90fd\u662fAdobe\u6ce8\u518c\uff0c\u4e5f\u6709\u90e8\u5206\u51fa\u81eaMicrosoft\uff0c\u6bd4\u65b9\u8bf4<a href=\"#cv01-cv09\" rel=\"noopener\" target=\"_blank\">&#8216;cv01&#8217; \u2013 &#8216;cv99&#8217;<\/a>\u3002<\/p>\n<h3>\u4e09\u3001\u534a\u767e\u7684\u5173\u952e\u5b57\u7d22\u5f15<\/h3>\n<p>OpenType\u5b57\u4f53\u7279\u5f81\u6807\u7b7e\u975e\u5e38\u591a\uff0c\u53ef\u80fd\u4e0a\u767e\u4e2a\u6709\uff0c\u6211\u8fd9\u91cc\u5c55\u793a\u7684\u670950+\uff0c\u7d22\u5f15\u5217\u8868\u5982\u4e0b\uff1a<\/p>\n<h4>\u8fde\u5b57\u4e0e\u53d8\u5316-Ligatures &amp; Alternate<\/h4>\n<ul>\n<li><a href=\"#liga\">liga &#8211; Common\/standard ligatures &#8211; \u901a\u7528\/\u6807\u51c6\u8fde\u5b57<\/a><\/li>\n<li><a href=\"#calt\">calt &#8211; Contextual alternates &#8211; \u4e0a\u4e0b\u6587\u4ea4\u66ff<\/a><\/li>\n<li><a href=\"#dlig\">dlig &#8211; Discretionary ligatures &#8211; \u914c\u60c5\u8fde\u5b57<\/a><\/li>\n<li><a href=\"#smcp\">smcp &#8211; Small caps &#8211; \u5c0f\u5199\u5b57\u6bcd\u8f6c\u4e3a\u5c0f\u4f53\u578b\u5927\u5199\u5b57\u6bcd<\/a><\/li>\n<li><a href=\"#c2sc\">c2sc &#8211; Capitals to small caps &#8211; \u5927\u5199\u5b57\u6bcd\u8f6c\u4e3a\u5c0f\u4f53\u578b\u5927\u5199\u5b57\u6bcd<\/a><\/li>\n<li><a href=\"#aalt\">aalt &#8211; Access All Alternates &#8211; \u6240\u6709\u66ff\u4ee3\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#swsh\">swsh &#8211; Swashes &#8211; \u6b64\u529f\u80fd\u5c06\u9ed8\u8ba4\u5b57\u7b26\u5b57\u5f62\u66ff\u6362\u4e3a\u76f8\u5e94\u7684\u659c\u7ebf\u5b57\u5f62\u3002<\/a><\/li>\n<li><a href=\"#cswh\">cswh &#8211; Contextual Swash &#8211; \u8bed\u5883\u51b2\u7a81<\/a><\/li>\n<li><a href=\"#hist\">hist &#8211; Historical Forms &#8211; \u5386\u53f2\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#hlig\">hlig &#8211; Historical Ligatures &#8211; \u5386\u53f2\u8fde\u5b57<\/a><\/li>\n<li><a href=\"#locl\">locl &#8211; Localized Forms &#8211; \u672c\u5730\u5316\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#rand\">rand &#8211; Randomize &#8211; \u968f\u673a\u6027<\/a><\/li>\n<li><a href=\"#cv01-cv99\">cv01-cv99<\/a><\/li>\n<li><a href=\"#salt\">salt &#8211; Stylistic alternates &#8211; \u6587\u4f53\u53d8\u5316\u66ff\u6362\u9ed8\u8ba4\u5b57\u7b26\u5b57\u5f62<\/a><\/li>\n<li><a href=\"#sups\">sups &#8211; Superscript &#8211; \u4e0a\u6807<\/a><\/li>\n<li><a href=\"#subs\">subs &#8211; Subscript &#8211; \u4e0b\u6807<\/a><\/li>\n<li><a href=\"#titl\">titl &#8211; Titling Alternates &#8211; \u6807\u9898\u66ff\u6362<\/a><\/li>\n<li><a href=\"#size\">size &#8211; Optical size &#8211; \u53ef\u89c1\u5c3a\u5bf8<\/a><\/li>\n<li><a href=\"#ornm\">ornm &#8211; Ornaments &#8211; \u88c5\u9970<\/a><\/li>\n<\/ul>\n<h4>\u4f4d\u7f6e\u4e0e\u8ddd\u79bb-Positions<\/h4>\n<ul>\n<li><a href=\"#kern\">kern &#8211; Kerning &#8211; \u5b57\u8ddd\u8c03\u6574<\/a><\/li>\n<li><a href=\"#ccmp\">ccmp &#8211; Glyph Composition\/Decomposition &#8211; \u5b57\u5f62\u7ec4\u6210\/\u5206\u89e3<\/a><\/li>\n<\/ul>\n<h4>\u6570\u5b57-Numbers<\/h4>\n<ul>\n<li><a href=\"#lnum\">lnum &#8211; Lining figures &#8211; \u886c\u780c\u6570\u5b57<\/a><\/li>\n<li><a href=\"#onum\">onum &#8211; Oldstyle figures &#8211; \u65e7\u6837\u5f0f\u6570\u5b57<\/a><\/li>\n<li><a href=\"#pnum\">pnum &#8211; Proportional figures &#8211; \u6bd4\u4f8b\u6570\u5b57<\/a><\/li>\n<li><a href=\"#tnum\">tnum &#8211; Tabular figures &#8211; \u8868\u683c\u6570\u5b57<\/a><\/li>\n<li><a href=\"#ordn\">ordn &#8211; Ordinals &#8211; \u5e8f\u6570\u5b57<\/a><\/li>\n<li><a href=\"#frac\">frac &#8211; Fractions &#8211; \u5206\u6570<\/a><\/li>\n<li><a href=\"#afrc\">afrc &#8211; Alternative Fractions &#8211; \u53d8\u6210\u5206\u6570\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#dnom\">dnom &#8211; Denominator form &#8211; \u5206\u6bcd\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#numr\">numr &#8211; Numerator form &#8211; \u5206\u5b50\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#zero\">zero &#8211; Slashed Zero &#8211; \u659c\u6760\u96f6<\/a><\/li>\n<li><a href=\"#mgrk\">mgrk &#8211; Mathematical Greek &#8211; \u6570\u5b66\u4e2d\u7684\u5e0c\u814a\u5b57\u7b26<\/a><\/li>\n<\/ul>\n<h4>\u6587\u4f53\u96c6-Stylistic sets<\/h4>\n<ul>\n<li><a href=\"#ss01-ss20\">ss01-ss20 &#8211; Stylistic sets 01\u201320 &#8211; \u6587\u4f53\u96c601-20<\/a><\/li>\n<\/ul>\n<h4>\u4e1c\u4e9a\u6587\u5b57-East Asian script<\/h4>\n<h5>\u5bbd\u5ea6\u53d8\u5316-Width variants<\/h5>\n<ul>\n<li><a href=\"#pwid\">pwid &#8211; Proportional Widths &#8211; \u6bd4\u4f8b\u5bbd\u5ea6<\/a><\/li>\n<li><a href=\"#palt\">palt &#8211; Proportional Alternate Widths &#8211; \u6539\u53d8\u5bbd\u5ea6\u5360\u636e\u6bd4\u4f8b<\/a><\/li>\n<li><a href=\"#pkna\">pkna &#8211; Proportional Kana &#8211; \u6bd4\u4f8b\u5047\u540d<\/a><\/li>\n<li><a href=\"#fwid\">fwid &#8211; Full Widths &#8211; \u5168\u5bbd<\/a><\/li>\n<li><a href=\"#hwid\">hwid &#8211; Half Widths &#8211; \u534a\u5bbd<\/a><\/li>\n<li><a href=\"#halt\">halt &#8211; Alternate Half Widths &#8211; \u53d8\u4e3a\u534a\u5bbd<\/a><\/li>\n<li><a href=\"#twid\">twid &#8211; Third Widths &#8211; \u4e09\u5206\u4e4b\u4e00\u5bbd<\/a><\/li>\n<li><a href=\"#qwid\">qwid &#8211; Quarter Widths &#8211; \u56db\u5206\u4e4b\u4e00\u5bbd<\/a><\/li>\n<\/ul>\n<h5>\u6587\u5316\u53d8\u4f53-Cultural variants<\/h5>\n<ul>\n<li><a href=\"#jp78\">jp78 &#8211; JIS78 Forms &#8211; JIS78\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#jp83\">jp83 &#8211; JIS83 Forms &#8211; JIS83\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#jp90\">jp90 &#8211; JIS90 Forms &#8211; JIS90\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#jp04\">jp04 &#8211; JIS2004 Forms &#8211; JIS2004\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#trad\">trad &#8211; Traditional Forms &#8211; \u4f20\u7edf\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#expt\">expt &#8211; Expert Forms &#8211; \u4e13\u4e1a\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#hojo\">hojo &#8211; Hojo Kanji Forms &#8211; Hojo\u6c49\u5b57\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#nlck\">nlck &#8211; NLC Kanji Forms &#8211; NLC\u6c49\u5b57\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#ruby\">ruby &#8211; Ruby Notation Forms &#8211; Ruby\u8868\u793a\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#hkna\">hkna &#8211; Horizontal Kana Alternates &#8211; \u6c34\u5e73\u5047\u540d\u66ff\u4ee3<\/a><\/li>\n<li><a href=\"#nalt\">nalt &#8211; Alternate Annotation Forms &#8211; \u5907\u7528\u6ce8\u91ca\u5f62\u5f0f<\/a><\/li>\n<li><a href=\"#ital\">ital &#8211; Italics &#8211; \u659c\u4f53<\/a><\/li>\n<\/ul>\n<h5>\u5782\u76f4\u7279\u5f81-Vertical features<\/h5>\n<ul>\n<li><a href=\"#vkrn\">vkrn &#8211; Vertical Kerning &#8211; \u5782\u76f4\u5b57\u8ddd<\/a><\/li>\n<li><a href=\"#vert\">vert &#8211; Vertical Alternates &#8211; \u5782\u76f4\u4ea4\u66ff<\/a><\/li>\n<li><a href=\"#vpal\">vpal &#8211;  Proportional Alternate Vertical Metrics &#8211; \u6bd4\u4f8b\u66ff\u4ee3\u5782\u76f4\u5ea6\u91cf\u6807\u51c6<\/a><\/li>\n<li><a href=\"#vhal\">vhal &#8211; Alternate Vertical Half Metrics &#8211; \u66ff\u4ee3\u5782\u76f4\u534a\u5ea6\u91cf<\/a><\/li>\n<li><a href=\"#vkna\">vkna &#8211; Vertical Kana Alternates &#8211; \u5782\u76f4\u6587\u672c\u7684\u66ff\u4ee3\u65e5\u8bed\u5047\u540d\u5f62\u5f0f<\/a><\/li>\n<\/ul>\n<h5>\u5176\u4ed6-others<\/h5>\n<ul>\n<li><a href=\"#others\">others &#8211; Others Feature tags &#8211; \u5176\u4ed6\u529f\u80fd\u6807\u7b7e<\/a><\/li>\n<\/ul>\n<p>\u4ee5\u4e0aOpenType\u5b57\u4f53\u7279\u5f81\u6807\u7b7e\u6211\u4e0d\u4f1a\u5168\u90e8\u4ecb\u7ecd\uff0c\u4f8b\u5982\u4e00\u4e9b\u65e5\u6587\u76f8\u5173\u7684\u8bbe\u5b9a\u6211\u4eec\u7528\u4e0d\u5230\uff0c\u53ea\u4f1a\u4e00\u5e26\u800c\u8fc7\uff0c\u4f60\u82e5\u6709\u5174\u8da3\uff0c\u53ef\u4ee5\u53bb\u6587\u672b\u7684\u53c2\u8003\u8d44\u6599\u7ee7\u7eed\u6df1\u5165\u3002<\/p>\n<p><span class=\"hidden\">\u6587\u672c\u539f\u5730\u5740\uff1ahttps:\/\/www.zhangxinxu.com\/wordpress\/?p=8238<\/span><\/p>\n<h3>\u56db\u3001\u5173\u952e\u5b57\u8be6\u7ec6\u8bed\u6cd5\u548c\u6848\u4f8b<\/h3>\n<h4 id=\"#liga\" style=\"margin-top:12px;\">Standard Ligatures: liga<\/h4>\n<p>\u4e3b\u8981\u9488\u5bf9\u82f1\u6587\u4e66\u5199\uff0c\u53ef\u4ee5\u8ba9\u591a\u4e2a\u5355\u72ec\u7684\u5b57\u7b26\u8868\u73b0\u4e3a\u8fde\u7eed\u4e66\u5199\uff0c\u4fd7\u79f0\u8fde\u5b57\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/warnock\" rel=\"noopener\" target=\"_blank\">Adobe Warnock\u7cfb\u5217\u5b57\u4f53<\/a><\/p>\n<p>\u4e0b\u9762\u662f\u4e24\u4e2a\u4e0d\u540c\u51fa\u5904\u7684\u6548\u679c\u5bf9\u6bd4\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_214453.png\" width=\"673\" height=\"115\" alt=\"\u8fde\u5b57\u6548\u679c\u5bf9\u6bd4\" class=\"alignnone size-medium\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_214649.png\" width=\"244\" height=\"128\" alt=\"\u8fde\u5b57\u6548\u679c\u5bf9\u6bd4\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4f7f\u7528CSS\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>.liga { font-feature-settings: \"liga\", \"clig\"; }<\/pre>\n<p>\u548c<code>\"clig\"<\/code>\u4e00\u540c\u4f7f\u7528\u4e86\u3002<\/p>\n<p>\u6b64\u6807\u7b7e\u8bbe\u8ba1\u4e3a\u9ed8\u8ba4\u53ef\u7528\uff0c\u4e5f\u5c31\u662f\u65e0\u9700\u8bbe\u7f6eCSS\u5c31\u8fde\u5b57\u6548\u679c\u3002\u4f46\u662f\u5b9e\u9645Chrome\u4e0b\u9ed8\u8ba4\u5374\u662f\u7981\u7528\u7684\uff0c\u800cSafari\u4e0b\u5374\u4e0d\u80fd\u88ab\u7981\u7528\u3002<\/p>\n<h4 id=\"#calt\">Contextual Alternates: calt<\/h4>\n<p>\u5305\u542b\u4e0a\u4e0b\u4ea4\u66ff\u7684\u8fde\u5b57\u884c\u4e3a\u3002\u770b\u4e0b\u9762\u56fe\u5c31\u77e5\u9053\u4ec0\u4e48\u610f\u601d\u4e86\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_215227.png\" width=\"475\" height=\"136\" alt=\"\u4e0a\u4e0b\u8fde\u5b57\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/caflisch-script\" rel=\"noopener\" target=\"_blank\">Adobe caflisch-script\u7cfb\u5217\u5b57\u4f53<\/a><\/p>\n<p>\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.calt { \r\n  font-feature-settings: \"calt\"; \r\n  font-variant-ligatures: common-ligatures;\r\n}<\/pre>\n<p>\u6b64\u6807\u7b7e\u8bbe\u8ba1\u4e3a\u9ed8\u8ba4\u53ef\u7528\uff0c\u4e5f\u5c31\u662f\u65e0\u9700\u8bbe\u7f6eCSS\u5c31\u8fde\u5b57\u6548\u679c\u3002\u4f46\u662f\u5b9e\u9645Chrome\u4e0b\u9ed8\u8ba4\u5374\u662f\u7981\u7528\u7684\uff0c\u800cSafari\u4e0b\u5374\u4e0d\u80fd\u88ab\u7981\u7528\u3002<\/p>\n<h4 id=\"#dlig\">Discretionary Ligatures: dlig<\/h4>\n<p>\u987e\u540d\u601d\u610f\uff0c\u914c\u60c5\u8fde\u5b57\uff0c\u4e0d\u8fc7\u561b\uff0c\u770b\u6548\u679c\uff0c\u4e0d\u662f\u914c\u60c5\uff0c\u800c\u662f\u5f3a\u884c\uff0c\u54c8\u54c8\u54c8\u54c8\u2026\u2026\uff08\u8fd9\u91cc\u6709\u6211\u7684\u7b11\u58f0\u2026\u2026\uff09\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/warnock\" rel=\"noopener\" target=\"_blank\">Adobe Warnock\u7cfb\u5217\u5b57\u4f53<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_220926.png\" width=\"152\" height=\"125\" alt=\"\u914c\u60c5\u8fde\u5b57\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u6b64\u6807\u7b7e\u8bbe\u8ba1\u4e3a\u9ed8\u8ba4\u4e0d\u53ef\u7528\uff0c\u9700\u8981CSS\u5f00\u542f\uff1a<\/p>\n<pre>.dlig { font-feature-settings: \"dlig\"; }<\/pre>\n<h4 id=\"#smcp\">Small Caps: smcp<\/h4>\n<p>\u6b64\u529f\u80fd\u53ef\u5c06\u5c0f\u5199\u5b57\u6bcd\u8f6c\u6362\u4e3a\u5c0f\u578b\u5927\u5199\u5b57\u6bcd\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/warnock\" rel=\"noopener\" target=\"_blank\">Adobe Warnock\u7cfb\u5217\u5b57\u4f53<\/a>\u4ee5\u53ca<a href=\"https:\/\/developer.apple.com\/fonts\/\" rel=\"noopener\" target=\"_blank\">\u82f9\u679cSan Francisco\u5b57\u4f53<\/a>\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_222547.png\" width=\"562\" height=\"108\" alt=\"\u5c0f\u4f53\u578b\u5927\u5199\u5b57\u6bcd\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u6b64\u6807\u7b7e\u8bbe\u8ba1\u4e3a\u9ed8\u8ba4\u4e0d\u53ef\u7528\uff0c\u9700\u8981CSS\u5f00\u542f\uff1a<\/p>\n<pre>.smcp {\r\n  font-variant-caps: small-caps;\r\n  font-feature-settings: \"smcp\";\r\n}<\/pre>\n<h4 id=\"#c2sc\">Capitals to Small Caps: c2sc<\/h4>\n<p>\u6b64\u529f\u80fd\u53ef\u4ee5\u5c06\u5927\u5199\u5b57\u6bcd\u8f6c\u6362\u4e3a\u5c0f\u578b\u5927\u5199\u5b57\u6bcd\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/warnock\" rel=\"noopener\" target=\"_blank\">Adobe Warnock\u7cfb\u5217\u5b57\u4f53<\/a>\u4ee5\u53ca<a href=\"https:\/\/developer.apple.com\/fonts\/\" rel=\"noopener\" target=\"_blank\">\u82f9\u679cSan Francisco\u5b57\u4f53<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_222941.png\" width=\"549\" height=\"108\" alt=\"\u5927\u5199\u5b57\u6bcd\u4e5f\u5c0f\u578b\u5316\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u6b64\u6807\u7b7e\u8bbe\u8ba1\u4e3a\u9ed8\u8ba4\u4e0d\u53ef\u7528\uff0c\u9700\u8981CSS\u5f00\u542f\uff1a<\/p>\n<pre>.c2sc {\r\n  font-variant-caps: all-small-caps;\r\n  font-feature-settings: \"c2sc\", \"smcp\";\r\n}<\/pre>\n<h4 id=\"#aalt\">Access All Alternates: aalt<\/h4>\n<p>\u8fd9\u662f\u4e2a\u6bd4\u8f83\u7279\u522b\u7684\u7279\u5f81\uff0c\u6240\u6709\u5b57\u4f53\u4e2d\u5305\u542b\u7684\u53ef\u66ff\u6362\u7684\u7279\u5f81\uff0c\u5168\u90e8\u90fd\u5411\u7528\u6237\u5448\u73b0\u3002<\/p>\n<p>\u6b64\u6548\u679c\u5728\u6240\u6709\u652f\u6301ligation\u548calternate\u5f62\u5f0f\u7684\u5b57\u4f53\u4e0a\u90fd\u53ef\u4ee5\u5448\u73b0\uff0c\u4f8b\u5982<a href=\"https:\/\/fonts.google.com\/specimen\/Sorts+Mill+Goudy\" rel=\"noopener\" target=\"_blank\">Google\u7684Sorts Mill Goudy<\/a>\u548c<a href=\"https:\/\/fonts.google.com\/specimen\/Yanone+Kaffeesatz\" rel=\"noopener\" target=\"_blank\">Google\u7684Yanone Kaffeesatz<\/a>\u7b49\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_223419.png\" width=\"557\" height=\"118\" alt=\"\u5448\u73b0\u6240\u6709\u7684\u53d8\u5316\u7279\u5f81\" class=\"alignnone size-medium\" \/><\/p>\n<pre>.aalt { font-feature-settings: \"aalt\"; }<\/pre>\n<h4 id=\"swsh\">Swashes: swsh<\/h4>\n<p>\u6b64\u529f\u80fd\u5c06\u9ed8\u8ba4\u5b57\u7b26\u5b57\u5f62\u66ff\u6362\u4e3a\u76f8\u5e94\u7684\u659c\u7ebf\u5b57\u5f62\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/bickham-script\" rel=\"noopener\" target=\"_blank\">Adobe bickham-script\u7cfb\u5217\u5b57\u4f53<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_223835.png\" width=\"444\" height=\"160\" alt=\"\u7279\u5f81\u5b57\u4f53\u503e\u659c\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4f7f\u7528CSS\u793a\u610f\uff1a<\/p>\n<pre>.swsh { font-feature-settings: \"swsh\"; }<\/pre>\n<h4 id=\"#cswh\">Contextual Swash: cswh<\/h4>\n<p>\u6839\u636e\u5b57\u6bcd\u5468\u56f4\u7684\u5b57\u7b26\u5c06\u5b57\u6bcd\u8f6c\u6362\u4e3a\u865a\u7ebf\u7248\u672c\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/bello\" rel=\"noopener\" target=\"_blank\">Adobe Bello\u7cfb\u5217\u5b57\u4f53<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_224548.png\" width=\"477\" height=\"173\" alt=\"\u957f\u5c3e\u5df4\u622a\u56fe\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4f7f\u7528CSS\u793a\u610f\uff1a<\/p>\n<pre>.cswh { font-feature-settings: \"cswh\"; }<\/pre>\n<h4 id=\"#hist\">Historical Forms: hist<\/h4>\n<p>\u7531\u7528\u6237\u81ea\u884c\u51b3\u5b9a\u662f\u5426\u5e94\u7528\u7684\u8fc7\u65f6\u5f62\u5f0f\u7684\u5b57\u7b26\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.google.com\/specimen\/Sorts+Mill+Goudy\" rel=\"noopener\" target=\"_blank\">Google\u7684Sorts Mill Goudy\u5b57\u4f53<\/a>\u548c<a href=\"https:\/\/fonts.google.com\/specimen\/Cardo\" rel=\"noopener\" target=\"_blank\">Google\u7684Cardo\u5b57\u4f53<\/a>\u7b49\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_224936.png\" width=\"352\" height=\"151\" alt=\"\u8fc7\u65f6\u7684\u5b57\u7b26\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4f7f\u7528CSS\u793a\u610f\uff1a<\/p>\n<pre>.hist { font-feature-settings: \"hist\"; }<\/pre>\n<h4 id=\"#hlig\">Historical Ligatures: hlig<\/h4>\n<p>\u7531\u7528\u6237\u81ea\u884c\u51b3\u5b9a\u662f\u5426\u5e94\u7528\u7684\u8fc7\u65f6\u7684\u8fde\u5b57\u4e66\u5199\u5f62\u5f0f\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.google.com\/specimen\/Cardo\" rel=\"noopener\" target=\"_blank\">Google\u7684Cardo<\/a>\u7b49\u5b57\u4f53\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_225305.png\" width=\"331\" height=\"170\" alt=\"\u8fc7\u65f6\u7684\u8fde\u5b57\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4f7f\u7528CSS\u793a\u610f\uff1a<\/p>\n<pre>.hlig { font-feature-settings: \"hlig\"; }<\/pre>\n<h4 id=\"#locl\">Localised Forms: locl<\/h4>\n<p>\u7528\u4e8e\u5728\u5e7f\u6cdb\u5730\u7406\u533a\u57df\u4e0a\u7f16\u5199\u591a\u79cd\u8bed\u8a00\u7684\u4efb\u4f55\u811a\u672c\u90fd\u5f00\u53d1\u4e86\u7279\u5b9a\u5b57\u6bcd\u7684\u672c\u5730\u5316\u53d8\u4f53\u5f62\u5f0f\uff0c\u4f9b\u5404\u4e2a\u6587\u5b66\u793e\u533a\u4f7f\u7528\u3002 \u4f8b\u5982\uff0c\u4fdd\u52a0\u5229\u4e9a\u548c\u585e\u5c14\u7ef4\u4e9a\u5b57\u6bcd\u8868\u4e2d\u7684\u8bb8\u591a\u5b57\u6bcd\u5177\u6709\u4e0e\u4fc4\u7f57\u65af\u5bf9\u5e94\u5b57\u6bcd\uff0c\u4f46\u5f62\u5f0f\u5f7c\u6b64\u4e0d\u540c\u3002\u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\uff0c\u672c\u5730\u5316\u5f62\u5f0f\u4ec5\u4e0e\u811a\u672c\u201c\u89c4\u8303\u201d\u7565\u6709\u4e0d\u540c\uff0c\u5728\u5176\u4ed6\u60c5\u51b5\u4e0b\uff0c\u5f62\u5f0f\u662f\u5b8c\u5168\u4e0d\u540c\u7684\u3002\u6b64\u529f\u80fd\u53ef\u4ee5\u5c06\u672c\u5730\u5316\u7684\u5b57\u5f62\u66ff\u6362\u4e3a\u9ed8\u8ba4\u5f62\u5f0f\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/developer.apple.com\/fonts\/\" rel=\"noopener\" target=\"_blank\">\u82f9\u679cSan Francisco\u5b57\u4f53<\/a>\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_230210.png\" width=\"392\" height=\"147\" alt=\"\u672c\u5730\u7279\u5f81\u540e\u7684\u5b57\u4f53\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u6b64\u7279\u5f81\u6807\u7b7e\u9ed8\u8ba4\u8bbe\u8ba1\u53ef\u7528\uff0c\u4f46\u5b9e\u9645\u8868\u73b0\u5404\u4e2a\u6d4f\u89c8\u5668\u6709\u5dee\u5f02\u3002\u4f7f\u7528CSS\u793a\u610f\uff1a<\/p>\n<pre>.locl { font-feature-settings: \"locl\"; }<\/pre>\n<h4 id=\"#rand\">Localised Forms: rand<\/h4>\n<p>\u7528\u968f\u673a\u5f62\u5f0f\u66ff\u6362\u5b57\u7b26\uff08\u7528\u6765\u6a21\u62df\u624b\u5199\uff09\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/www.fontshop.com\/families\/ff-kosmik\">FF Kosmik<\/a>\u548c<a href=\"https:\/\/github.com\/khaledhosny\/punk-otf\">Punk Nova<\/a>\u548c<a href=\"https:\/\/www.metaflop.com\/metafonts\/fetamont\">MF FetaMont<\/a>\u3002<\/p>\n<p>\u8868\u73b0\u793a\u610f\u5982\u4e0b\u622a\u56fe\uff0c\u4ed4\u7ec6\u89c2\u5bdf\u53ef\u4ee5\u770b\u5230\u4e0b\u9762\u4e00\u884c\u8fde\u7eed\u5b57\u6bcd\u5927\u5c0f\u53c2\u5dee\uff0c\u4e0a\u9762\u4e00\u884c\u662f\u6ca1\u6709\u5e94\u7528\u8be5\u6807\u7b7e\u7279\u6027\u7684\u6548\u679c\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_230851.png\" width=\"394\" height=\"199\" alt=\"\u968f\u673a\u4e0e\u5927\u5c0f\u53c2\u5dee\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4f7f\u7528CSS\u793a\u610f\uff1a<\/p>\n<pre>.rand { font-feature-settings: \"rand\"; }<\/pre>\n<p>\u5982\u679c\u60f3\u8981\u5173\u95ed\u968f\u673a\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>.rand--off { font-feature-settings: \"rand\" 0, \"calt\" 0; }<\/pre>\n<h4 id=\"cv01-cv99\">Character Variant 1 \u2013 99: cv01-cv99<\/h4>\n<p>\u5355\u4e2a\u5b57\u7b26\u7684\u591a\u4e2a\u53d8\u4f53\uff08\u53ef\u80fd\u4e0d\u9002\u7528\u4e8e\u8bb8\u591a\u5176\u4ed6\u5b57\u7b26\uff09\u8bf7\u53c2\u9605\u5927\u91cf\u6587\u6863\u7684\u53c2\u8003\u3002<\/p>\n<p>\u5176\u4ed6\u7565~<\/p>\n<h4 id=\"#salt\">Stylistic Alternates: salt<\/h4>\n<p>\u6b64\u529f\u80fd\u4f7f\u7528\u53d8\u5316\u7684\u6837\u5f0f\u66ff\u6362\u9ed8\u8ba4\u5b57\u7b26\u5b57\u5f62\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/bree\" rel=\"noopener\" target=\"_blank\">Adobe\u7684Bree\u7cfb\u7edf\u5b57\u4f53<\/a>\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_232007.png\" width=\"500\" height=\"101\" alt=\"salt\u6587\u5b57\u8868\u73b0\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.salt { font-feature-settings: \"salt\"; }<\/pre>\n<h4 id=\"#subs\">Subscript: subs<\/h4>\n<p>\u6b64\u529f\u80fd\u53ef\u4ee5\u4f7f\u7528\u4e0b\u6807\u5b57\u5f62\u66ff\u6362\u9ed8\u8ba4\u5b57\u5f62\uff0c\u6216\u8005\u53ef\u4ee5\u5c06\u5b57\u5f62\u66ff\u6362\u4e0e\u5b9a\u4f4d\u8c03\u6574\u7ec4\u5408\u4ee5\u8fdb\u884c\u6b63\u786e\u653e\u7f6e\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/warnock\" rel=\"noopener\" target=\"_blank\">Adobe Warnock\u7cfb\u5217\u5b57\u4f53<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_232323.png\" width=\"277\" height=\"155\" alt=\"\u5b57\u4f53\u4e0b\u6807\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.subs { font-feature-settings: \"subs\"; }<\/pre>\n<h4 id=\"#sups\">Superscript: sups<\/h4>\n<p>\u6b64\u529f\u80fd\u7528\u4f18\u8d28\u6570\u5b57\uff08\u4e3b\u8981\u7528\u4e8e\u811a\u6ce8\u6307\u793a\uff09\u66ff\u6362\u886c\u91cc\u6216\u65e7\u5f0f\u6570\u5b57\uff0c\u5e76\u7528\u9ad8\u7ea7\u5b57\u6bcd\u66ff\u6362\u5c0f\u5199\u5b57\u6bcd\uff08\u4e3b\u8981\u7528\u4e8e\u7f29\u5199\u7684\u6cd5\u8bed\u6807\u9898\uff09\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/hypatia-sans\" rel=\"noopener\" target=\"_blank\">Adobe Hypatia Sans\u7cfb\u5217\u5b57\u4f53<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_232535.png\" width=\"83\" height=\"146\" alt=\"\u4e0a\u6807\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.sups { font-feature-settings: \"sups\"; }<\/pre>\n<h4 id=\"#titl\">Titling Alternates: titl<\/h4>\n<p>\u6b64\u529f\u80fd\u5c06\u9ed8\u8ba4\u5b57\u5f62\u66ff\u6362\u4e3a\u4e13\u95e8\u4e3a\u6807\u9898\u8bbe\u8ba1\u7684\u76f8\u5e94\u5f62\u5f0f\u3002 \u8fd9\u4e9b\u53ef\u4ee5\u662f\u5168\u8eab\u548c\uff08\u6216\uff09\u66f4\u5927\u7684\u8eab\u4f53\uff0c\u5e76\u4e14\u53ef\u4ee5\u8c03\u6574\u4ee5\u4fbf\u4ee5\u66f4\u5927\u7684\u5c3a\u5bf8\u89c2\u770b\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.google.com\/specimen\/Allan\" rel=\"noopener\" target=\"_blank\">Google\u7684Allan\u5b57\u4f53<\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_233155.png\" width=\"456\" height=\"155\" alt=\"\u9002\u5408\u6807\u9898\u6d4f\u89c8\u7684\u66ff\u6362\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.titl { font-feature-settings: \"titl\"; }<\/pre>\n<h4 id=\"#size\">Optical size: size<\/h4>\n<p>\u4e0d\u662f\u67e5\u627e\uff1a\u529f\u80fd\u8868\u5411\u5e94\u7528\u7a0b\u5e8f\u63d0\u4f9b\u6709\u5173\u5b57\u4f53\u5916\u89c2\u548c\u610f\u56fe\u7684\u4fe1\u606f\uff0c\u4ee5\u5e2e\u52a9\u8fdb\u884c\u5b57\u4f53\u9009\u62e9\u3002 <\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.google.com\/specimen\/Source+Sans+Pro\" rel=\"noopener\" target=\"_blank\">Google\u7684Source Sans Pro\u5b57\u4f53<\/a><\/p>\n<p>\u5176\u4ed6\u7565\u3002<\/p>\n<h4 id=\"#ormn\">Ornaments: ornm<\/h4>\n<p>\u8fd9\u662f\u4e00\u4e2a\u53cc\u529f\u80fd\u529f\u80fd\uff0c\u5b83\u4f7f\u7528\u4e24\u79cd\u8f93\u5165\u65b9\u6cd5\u8ba9\u7528\u6237\u53ef\u4ee5\u8bbf\u95ee\u5b57\u4f53\u4e2d\u7684\u88c5\u9970\u5b57\u5f62\uff08\u4f8b\u5982fleurons\uff0cdingbats\u548cborder\u5143\u7d20\uff09\u3002 \u4e00\u79cd\u65b9\u6cd5\u7528\u5168\u5957\u53ef\u7528\u88c5\u9970\u5b57\u7b26\u66ff\u6362\u9879\u76ee\u7b26\u53f7\u5b57\u7b26; \u53e6\u4e00\u4e2a\u7528\u5206\u914d\u7ed9\u5b83\u4eec\u7684\u88c5\u9970\u5b57\u7b26\u66ff\u6362\u7279\u5b9a\u7684\u201c\u4f4e\u7ea7ASCII\u201d\u5b57\u7b26\u3002 \u7b2c\u4e00\u79cd\u65b9\u6cd5\u652f\u6301\u666e\u901a\u7528\u6237\u6216\u6d4f\u89c8\u7528\u6237\uff1b\u7b2c\u4e8c\u4e2a\u652f\u6301\u9ad8\u7ea7\u7528\u6237\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1aClara<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_233719.png\" width=\"372\" height=\"164\" alt=\"\u7279\u6b8a\u5b57\u7b26\u56fe\u5f62\u88c5\u9970\u66ff\u6362\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.ornm { font-feature-settings: \"ornm\"; }<\/pre>\n<h4 id=\"#kern\">Kerning: kern<\/h4>\n<p>\u6b64\u529f\u80fd\u53ef\u8c03\u6574\u5b57\u5f62\u4e4b\u95f4\u7684\u7a7a\u95f4\u91cf\uff0c\u901a\u5e38\u53ef\u5728\u5b57\u5f62\u4e4b\u95f4\u63d0\u4f9b\u53ef\u89c1\u7684\u4e00\u81f4\u7684\u95f4\u8ddd\u3002 \u867d\u7136\u8bbe\u8ba1\u826f\u597d\u7684\u5b57\u4f53\u603b\u4f53\u4e0a\u5177\u6709\u4e00\u81f4\u7684\u5b57\u5f62\u95f4\u8ddd\uff0c\u4f46\u662f\u4e00\u4e9b\u5b57\u5f62\u7ec4\u5408\u9700\u8981\u8c03\u6574\u4ee5\u63d0\u9ad8\u6613\u8bfb\u6027\u3002 \u8bf7\u6ce8\u610f\uff0c\u6b64\u529f\u80fd\u53ef\u80fd\u9002\u7528\u4e8e\u4e24\u4e2a\u4ee5\u4e0a\u5b57\u5f62\u7684\u8fd0\u884c\uff0c\u5e76\u4e14\u4e0d\u4f1a\u7528\u4e8e\u7b49\u5bbd\u5b57\u4f53\u3002\u53e6\u8bf7\u6ce8\u610f\uff0c\u6b64\u529f\u80fd\u4e0d\u9002\u7528\u4e8e\u5782\u76f4\u8bbe\u7f6e\u7684\u6587\u672c\u3002<\/p>\n<p><strong>\u5927\u90e8\u5206OpenType\u5b57\u4f53\u90fd\u652f\u6301\u6b64\u7279\u5f81<\/strong>\uff0c\u56e0\u6b64\uff0c\u662f\u4e00\u4e2a\u53ef\u4ee5\u5728web\u4e2d\u5927\u8303\u56f4\u793a\u610f\u7684\u5c5e\u6027\u503c\u3002<\/p>\n<p>\u6548\u679c\u793a\u610f\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_234050.png\" width=\"411\" height=\"159\" alt=\"\u95f4\u8ddd\u6392\u5217\u66f4\u52a0\u5408\u7406\u4e86\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff0c\u4e24\u884cCSS\u5206\u522b\u5bf9\u5e94\u4e0a\u9762\u622a\u56fe\u7684\u4e0a\u4e0b\u4e24\u884c\uff1a<\/p>\n<pre>.kern--off { font-feature-settings: normal; font-kerning: none; }\r\n.kern { font-feature-settings: \"kern\"; }<\/pre>\n<h4 id=\"#ccmp\">Glyph Composition \/ Decomposition: ccmp<\/h4>\n<p>\u4e3a\u4e86\u6700\u5c0f\u5316\u5b57\u5f62\u4ea4\u66ff\u7684\u6570\u91cf\uff0c\u6709\u65f6\u9700\u8981\u5c06\u5b57\u7b26\u5206\u89e3\u4e3a\u4e24\u4e2a\u5b57\u5f62\u3002 \u53e6\u5916\uff0c\u4e3a\u4e86\u66f4\u597d\u7684\u5b57\u5f62\u5904\u7406\uff0c\u6700\u597d\u5c06\u4e24\u4e2a\u5b57\u7b26\u7ec4\u5408\u6210\u5355\u4e2a\u5b57\u5f62\u3002 \u8be5\u7279\u5f81\u5141\u8bb8\u8fd9\u79cd\u7ec4\u5408\/\u5206\u89e3\u3002 \u8be5\u7279\u5f81\u5e94\u4f5c\u4e3a\u5904\u7406\u7684\u7b2c\u4e00\u4e2a\u7279\u5f81\u5904\u7406\uff0c\u5e76\u4e14\u53ea\u5e94\u5728\u8c03\u7528\u65f6\u5904\u7406\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-08_234912.png\" width=\"387\" height=\"139\" alt=\"\u7ec4\u5408\u548c\u5206\u89e3\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u6839\u636e\u67d0\u4e9b\u8d44\u6599\u663e\u793a\uff0c\u6b64\u7279\u5f81\u6d4f\u89c8\u5668\u8fd8\u5728\u5b9e\u73b0\u4e2d\uff0c\u56e0\u6b64\uff0c\u5176\u4ed6\u7565\u2026\u2026<\/p>\n<h4 id=\"#lnum\">Lining Figures: lnum<\/h4>\n<p>\u6b64\u529f\u80fd\u5c06\u6570\u5b57\u5b57\u5f62\u4ece\u9ed8\u8ba4\u6216\u65e7\u5f0f\u6570\u5b57\u66f4\u6539\u4e3a\u886c\u91cc\u6570\u5b57\u3002 \u8bf7\u6ce8\u610f\uff0c\u67d0\u4e9b\u5b57\u4f53\u53ef\u80fd\u5305\u542b\u886c\u91cc\u56fe\u5f62\u4f5c\u4e3a\u5176\u9ed8\u8ba4\u56fe\u5f62\u6837\u5f0f\uff0c\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\u542f\u7528\u6b64\u529f\u80fd\u53ef\u80fd\u4e0d\u4f1a\u5f71\u54cd\u5b57\u5f62\u7684\u6837\u5f0f\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/warnock\" rel=\"noopener\" target=\"_blank\">Adobe Warnock\u7cfb\u5217\u5b57\u4f53<\/a>\u548c<a href=\"https:\/\/fonts.adobe.com\/fonts\/hypatia-sans\" rel=\"noopener\" target=\"_blank\">Adobe\u7684Hypatia Sans\u7cfb\u5217\u5b57\u4f53<\/a>\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_000916.png\" width=\"311\" height=\"53\" alt=\"\u6570\u5b57\u8868\u73b0\u622a\u56fe\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.lnum { font-feature-settings: \"lnum\"; }<\/pre>\n<h4 id=\"#onum\">Oldstyle Figures: onum<\/h4>\n<p>\u6b64\u529f\u80fd\u5c06\u6570\u5b57\u5b57\u5f62\u4ece\u9ed8\u8ba4\u6216\u886c\u91cc\u6570\u5b57\u66f4\u6539\u4e3a\u65e7\u5f0f\u6570\u5b57\u3002 \u8bf7\u6ce8\u610f\uff0c\u67d0\u4e9b\u5b57\u4f53\u53ef\u80fd\u5305\u542b\u65e7\u6837\u5f0f\u4f5c\u4e3a\u5176\u9ed8\u8ba4\u56fe\u5f62\u6837\u5f0f\uff0c\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\u542f\u7528\u6b64\u529f\u80fd\u53ef\u80fd\u4e0d\u4f1a\u5f71\u54cd\u5b57\u5f62\u6837\u5f0f\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/warnock\" rel=\"noopener\" target=\"_blank\">Adobe Warnock\u7cfb\u5217\u5b57\u4f53<\/a>\u548c<a href=\"https:\/\/fonts.adobe.com\/fonts\/hypatia-sans\" rel=\"noopener\" target=\"_blank\">Adobe\u7684Hypatia Sans\u7cfb\u5217\u5b57\u4f53<\/a>\u3002<\/p>\n<p>\u5e94\u7528\u6b64\u7279\u5f81\uff0c\u6570\u5b57\u53ef\u4ee5\u8868\u73b0\u4e3a\u4e0a\u4e0b\u9ad8\u4f4e\u9519\u843d\u6392\u5217\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_001138.png\" width=\"307\" height=\"59\" alt=\"\u6587\u5b57\u4e0a\u4e0b\u6709\u5e8f\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.onum { font-feature-settings: \"onum\"; }<\/pre>\n<h4 id=\"#pnum\">Proportional Figures: pnum<\/h4>\n<p>\u539f\u672c\u9ed8\u8ba4\u5b57\u5f62\u7684\u5bbd\u5ea6\u662f\u8868\u683c\u5bbd\u5ea6\uff0c\u4e5f\u5c31\u662f\u5404\u4e2a\u5b57\u5f62\u6709\u7740\u7edf\u4e00\u7684\u5bbd\u5ea6\u8868\u73b0\uff0c\u6b64\u529f\u80fd\u53ef\u4ee5\u628a\u539f\u672c\u7684\u5bbd\u5ea6\u8868\u73b0\u53d8\u6210\u57fa\u4e8e\u5b57\u5f62\u672c\u8eab\u5f62\u72b6\u4e0b\u7684\u7279\u5b9a\u5bbd\u5ea6\u8868\u73b0\u3002\u8bf7\u6ce8\u610f\uff0c\u67d0\u4e9b\u5b57\u4f53\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5176\u5bbd\u5ea6\u5c31\u662f\u6309\u7167\u6570\u5b57\u672c\u8eab\u8eab\u5f62\u6765\u7684\uff0c\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\u542f\u7528\u6b64\u529f\u80fd\u53ef\u80fd\u4e0d\u4f1a\u5f71\u54cd\u5b57\u5f62\u7684\u5bbd\u5ea6\u3002\u8fd8\u6709\uff0c\u7b49\u5bbd\u5b57\u4f53\u4e0d\u53d7\u6b64\u529f\u80fd\u5f71\u54cd\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/hypatia-sans\" rel=\"noopener\" target=\"_blank\">Adobe\u7684Hypatia Sans\u7cfb\u5217\u5b57\u4f53<\/a>\u3002<\/p>\n<p>\u6548\u679c\u793a\u610f\u5982\u4e0b\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_134755.png\" width=\"319\" height=\"98\" alt=\"\u57fa\u4e8e\u5b57\u5f62\u7684\u5bbd\u5ea6\u6bd4\u4f8b\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4e0a\u56fe\u4e2d\u7684\u5782\u76f4\u7ebf\u662f\u4e3a\u4e86\u65b9\u4fbf\u5927\u5bb6\u770b\u6e05\u695a\u6bcf\u4e2a\u6570\u5b57\u5bbd\u5ea6\u800c\u753b\u51fa\u6765\u7684\uff0c\u5b9e\u9645\u4e0a\u662f\u6ca1\u6709\u8fd9\u4e9b\u7ad6\u76f4\u7ebf\u7684\u3002<\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.pnum { font-feature-settings: \"pnum\"; }<\/pre>\n<h4 id=\"#tnum\">Tabular Figures: tnum<\/h4>\n<p>\u6b64\u529f\u80fd\u548c<code>\"pnum\"<\/code>\u6b63\u597d\u662f\u5bf9\u7acb\u7684\u3002<code>\"tnum\"<\/code>\u662f\u8ba9\u6bd4\u4f8b\u5bbd\u5ea6\u663e\u793a\u7684\u6570\u5b57\u53d8\u6210\u6309\u7167\u8868\u683c\u5bbd\u5ea6\u663e\u793a\uff0c\u5bf9\u6bd4\u4e0b\u9762\u7684\u56fe\u5c31\u77e5\u9053\u610f\u601d\u4e86\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_135608.png\" width=\"337\" height=\"102\" alt=\"\u8868\u683c\u5bbd\u5ea6\u5448\u73b0\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u5c24\u5176\u89c2\u5bdf\u6570\u5b57<code>1<\/code>\u5360\u636e\u7684\u5bbd\u5ea6\uff0c<code>\"pnum\"<\/code>\u53ea\u6709\u4e00\u70b9\u70b9\u5bbd\u5ea6\uff0c\u6309\u7167\u5b57\u5f62\u6bd4\u4f8b\u6765\u7684\uff0c\u800c\u8fd9\u91cc\u7684<code>\"tnum\"<\/code>\u5219\u5bbd\u5ea6\u548c\u540e\u9762\u7684\u4e00\u81f4\uff0c\u6309\u7167\u8868\u683c\u5bbd\u5ea6\u6765\u7684\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/hypatia-sans\" rel=\"noopener\" target=\"_blank\">Adobe\u7684Hypatia Sans\u7cfb\u5217\u5b57\u4f53<\/a>\u3002<\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.tnum { font-feature-settings: \"tnum\"; }<\/pre>\n<h4 id=\"#ordn\">Ordinals: ordn<\/h4>\n<p>\u8868\u73b0\u4e3a\u5e8f\u5217\u6570\u5b57\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/warnock\" rel=\"noopener\" target=\"_blank\">Adobe Warnock\u7cfb\u5217\u5b57\u4f53<\/a>\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_140520.png\" width=\"317\" height=\"157\" alt=\"\u8868\u73b0\u4e3a\u5e8f\u6570\u5b57\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.ordn { font-feature-settings: \"ordn\"; }<\/pre>\n<h4 id=\"#frac\">Fractions: frac<\/h4>\n<p>\u6b64\u529f\u80fd\u5c06\u659c\u7ebf\u5206\u9694\u7684\u6570\u5b57\u66ff\u6362\u4e3a\u666e\u901a\uff08\u5bf9\u89d2\u7ebf\uff09\u5206\u6570\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.google.com\/specimen\/Ubuntu+Mono\" rel=\"noopener\" target=\"_blank\">Google\u7684Ubuntu Mono\u5b57\u4f53<\/a>\u3001<a href=\"https:\/\/fonts.adobe.com\/fonts\/warnock\" rel=\"noopener\" target=\"_blank\">Adobe Warnock\u7cfb\u5217\u5b57\u4f53<\/a>\u4ee5\u53ca<a href=\"https:\/\/developer.apple.com\/fonts\/\" rel=\"noopener\" target=\"_blank\">\u82f9\u679cSan Francisco\u5b57\u4f53<\/a>\u3002<\/p>\n<p>\u6548\u679c\u793a\u610f\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_140124.png\" width=\"500\" height=\"120\" alt=\" \u6570\u5b57\u4e0e\u5206\u6570\u8868\u793a\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.frac { font-feature-settings: \"frac\"; }<\/pre>\n<h4 id=\"#afrc\">Alternative Fractions: afrc<\/h4>\n<p>\u5c06\u7531\u659c\u7ebf\u5206\u9694\u7684\u6570\u5b57\u8f6c\u6362\u4e3a\u4ea4\u66ff\u53e0\u52a0\u5206\u6570\u5f62\u5f0f\uff0c\u5bf9\u6bd4\u4e0b\u56fe\u53ef\u4ee5\u611f\u77e5\u5230\u548c<code>\"frac\"<\/code>\u5206\u6570\u8868\u73b0\u5f62\u5f0f\u7684\u4e0d\u540c\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_141651.png\" width=\"509\" height=\"112\" alt=\"\u4ea4\u66ff\u53e0\u52a0\u7684\u5206\u6570\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.google.com\/specimen\/Ubuntu+Mono\" rel=\"noopener\" target=\"_blank\">Google\u7684Ubuntu Mono\u5b57\u4f53<\/a>\u3002<\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.afrc { font-feature-settings: \"afrc\"; }<\/pre>\n<h4 id=\"#dnom\">Denominator: dnom<\/h4>\n<p>\u8f6c\u6362\u4e3a\u9002\u5f53\u7684\u5206\u6570\u5206\u6bcd\u5f62\u5f0f\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.google.com\/specimen\/Ubuntu+Mono\" rel=\"noopener\" target=\"_blank\">Google\u7684Ubuntu Mono\u5b57\u4f53<\/a>\u548c<a href=\"https:\/\/fonts.adobe.com\/fonts\/hypatia-sans\" rel=\"noopener\" target=\"_blank\">Adobe Hypatia Sans\u7cfb\u5217\u5b57\u4f53<\/a>\u3002<\/p>\n<p>\u6d4f\u89c8\u5668\u771f\u5b9e\u8868\u73b0\u622a\u56fe\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_142205.png\" width=\"509\" height=\"119\" alt=\"\u5408\u9002\u7684\u5206\u6bcd\u8868\u73b0\u622a\u56fe\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.dnom { font-feature-settings: \"dnom\"; }<\/pre>\n<h4 id=\"#numr\">Numerator: numr<\/h4>\n<p>\u8f6c\u6362\u4e3a\u9002\u5f53\u7684\u5206\u6570\u5206\u5b50\u5f62\u5f0f\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.google.com\/specimen\/Ubuntu+Mono\" rel=\"noopener\" target=\"_blank\">Google\u7684Ubuntu Mono\u5b57\u4f53<\/a>\u3002<\/p>\n<p>Chrome\u6d4f\u89c8\u5668\u4e0b\u53ef\u80fd\u8868\u73b0\u4e3a\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_142419.png\" width=\"506\" height=\"112\" alt=\"\u5206\u6570\u5206\u5b50\u5f62\u5f0f\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\u793a\u610f\uff1a<\/p>\n<pre>.numr { font-feature-settings: \"numr\"; }<\/pre>\n<h4 id=\"#zero\">Slashed Zero: zero<\/h4>\n<p>0\u53d8\u6210\u5e26\u659c\u6760\u76840.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_142757.png\" width=\"128\" height=\"86\" alt=\"\u5e26\u659c\u6760\u7684\u96f6\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/warnock\" rel=\"noopener\" target=\"_blank\">Adobe Warnock\u7cfb\u5217\u5b57\u4f53<\/a>\u3001<a href=\"https:\/\/fonts.adobe.com\/fonts\/hypatia-sans\" rel=\"noopener\" target=\"_blank\">Adobe Hypatia Sans\u7cfb\u5217\u5b57\u4f53<\/a>\u4ee5\u53ca<a href=\"https:\/\/fonts.google.com\/specimen\/Exo\" rel=\"noopener\" target=\"_blank\">Google\u7684Exo\u5b57\u4f53<\/a>\u7b49\u3002<\/p>\n<p>CSS\u4ee3\u7801\u793a\u610f\uff1a<\/p>\n<pre>.zero { font-feature-settings: \"zero\"; }<\/pre>\n<h4 id=\"#mgrk\">Mathematical Greek: mgrk<\/h4>\n<p>\u5c06\u5e0c\u814a\u5b57\u5f62\u7684\u6807\u51c6\u5370\u5237\u5f62\u5f0f\u66ff\u6362\u4e3a\u6570\u5b66\u7b26\u53f7\u4e2d\u5e38\u7528\u7684\u76f8\u5e94\u5f62\u5f0f\uff08\u8fd9\u662f\u5e0c\u814a\u5b57\u6bcd\u8868\u7684\u4e00\u4e2a\u5b50\u96c6\uff09\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.google.com\/specimen\/Fira+Sans\" rel=\"noopener\" target=\"_blank\">Fira Sans<\/a>\u3001<a href=\"https:\/\/www.myfonts.com\/fonts\/fontfont\/ff-din\/\" rel=\"noopener\" target=\"_blank\">FF DIN<\/a>\u3001<a href=\"https:\/\/www.myfonts.com\/fonts\/fontfont\/ff-meta\/\" rel=\"noopener\" target=\"_blank\">FF Meta<\/a>\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_144540.png\" width=\"233\" height=\"103\" alt=\"\u5e0c\u814a\u4e0e\u6570\u5b57\" class=\"alignnone size-medium\" \/><\/p>\n<pre>.mgrk { font-feature-settings: \"mgrk\"; }<\/pre>\n<h4 id=\"#ss01-ss20\">Stylistic Set 1 \u2013 20: ss01-ss20<\/h4>\n<p>\u6b64\u529f\u80fd\u4f7f\u7528\u5176\u4ed6\u6837\u5f0f\u66ff\u6362\u9ed8\u8ba4\u5b57\u7b26\u5b57\u5f62\u96c6\uff0c\u53ef\u4ee5\u770b\u6210\u662f\u4e0a\u9762\u8bf8\u591a\u5b57\u5f62\u7279\u5f81\u7684\u53e6\u5916\u4e00\u4e2a\u6570\u7ec4\u540d\u79f0\uff0c\u8303\u56f4\u4ecess01-ss20\uff0c\u53ef\u4ee5\u670920\u4e2a\u4ee3\u79f0\u3002\u8fd9\u79cd\u591a\u79cd\u98ce\u683c\u96c6\u4e2d\u5728\u4e00\u8d77\u7684\u5b57\u5f62\uff0c\u53ef\u4ee5\u8bbe\u8ba1\u6210\u5728\u89c6\u89c9\u4e0a\u6709\u7279\u5b9a\u89c4\u5f8b\u3001\u6216\u4ee5\u7279\u5b9a\u65b9\u5f0f\u4ea4\u4e92\u6216\u4ee5\u5176\u4ed6\u6bd4\u8f83\u534f\u8c03\u7684\u65b9\u5f0f\uff0c\u8fd9\u6837\uff0c\u4e00\u5b57\u6392\u5f00\u5448\u73b0\u7684\u65f6\u5019\u6548\u679c\u770b\u4e0a\u53bb\u4f1a\u5f88\u8212\u670d\u3002 \u53e6\u8bf7\u53c2\u89c1\uff1a stylistic alternates (salt)\uff0c\u65e8\u5728\u63d0\u4f9b\u5355\u4e2a\u5b57\u5f62\u7684\u98ce\u683c\u66ff\u4ee3\u3002<\/p>\n<p>\u8981\u4f7f\u7528<code>font-feature-settings<\/code>\u542f\u7528\u5b83\uff0c\u8bf7\u4f7f\u7528<code>ss##<\/code>\u4f5c\u4e3a\u529f\u80fd\u6807\u8bb0\uff0c\u5176\u4e2d##\u662f01-20\u4e2d\u7684\u4efb\u610f\u4e24\u4f4d\u6570\u7ec4\u5408\u3002\u8bf7\u6ce8\u610f\uff0c\u5b57\u4f53\u4ee5\u5b8c\u5168\u4efb\u610f\u548c\u81ea\u5b9a\u4e49\u7684\u65b9\u5f0f\u4f7f\u7528\u6837\u5f0f\u96c6\u3002\u4f8b\u5982\uff0c\u4e24\u79cd\u4e0d\u540c\u7684\u5b57\u4f53\u53ef\u4ee5\u4f7f\u7528\u76f8\u540c\u7684\u7279\u5f81\uff08\u5982ss01\uff09\u6765\u66ff\u6362\u5b8c\u5168\u4e0d\u540c\u7684\u5b57\u5f62\u96c6; \u6216\u8005\uff0c\u7279\u5b9a\u5b57\u4f53\u53ef\u4ee5\u4f7f\u7528ss01\u548css03\u6765\u66ff\u6362\u5b57\u5f62\u96c6\uff0c\u4f46\u5ffd\u7565ss02\u3002\u67d0\u4e9b\u7c7b\u578b\u7684\u751f\u4ea7\u8fd9\u4f1a\u63d0\u4f9b\u6709\u5173\u5982\u4f55\u7ec4\u7ec7\u529f\u80fd\u7684\u6587\u6863\u3002<\/p>\n<p>\u53ef\u4ee5\u8868\u73b0\u6b64\u7279\u5f81\u7684\u5b57\u4f53\uff1a<a href=\"https:\/\/fonts.adobe.com\/fonts\/hypatia-sans\" rel=\"noopener\" target=\"_blank\">Adobe Hypatia Sans\u7cfb\u5217\u5b57\u4f53<\/a>\u3001<a href=\"https:\/\/developer.apple.com\/fonts\/\" rel=\"noopener\" target=\"_blank\">\u82f9\u679cSan Francisco\u5b57\u4f53<\/a>\u7b49\u5f88\u591a\u5b57\u4f53\u3002<\/p>\n<p>\u6548\u679c\u7565\uff0c\u6f14\u793a\u7565\uff0c\u6709\u5174\u8da3\u53ef\u4ee5\u53c2\u89c1\u6700\u540e\u7684\u6587\u6863\u3002<\/p>\n<h4 id=\"#pwid\">Proportional Widths: pwid<\/h4>\n<p>\u5b57\u5f62\u5bbd\u5ea6\uff0c\u4e1c\u4e9a\u6587\u5b57\u5360\u636e\u5bbd\u5ea6\u6309\u7167\u5b57\u5f62\u6765\u7b97\u3002\u901a\u5e38\u7528\u4e8eCJKV\u5b57\u4f53\u4e2d\u7684\u62c9\u4e01\u5b57\u7b26\uff0c\u4f46\u4e5f\u53ef\u7528\u4e8e\u65e5\u8bed\u5b57\u4f53\u4e2d\u7684\u5047\u540d\u3002\u4e2d\u6587\u5b57\u4f53\u90fd\u662f\u7b49\u5bbd\uff0c\u56e0\u6b64\uff0c\u7528\u4e0d\u5230\u3002\u653e\u4e2a\u56fe\u793a\u610f\u4e0b\u5427\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_150041.png\" width=\"547\" height=\"160\" alt=\"\u65e5\u6587\u5047\u540d\u6bd4\u4f8b\u5bbd\u5ea6\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<h4 id=\"#palt\">Proportional Alternate Widths: palt<\/h4>\n<p>\u6b64\u529f\u80fd\u53ef\u91cd\u65b0\u8bbe\u7f6e\u8bbe\u8ba1\u4e3a\u5168\u5bbd\u5ea6\u5bbd\u5ea6\u7684\u5b57\u5f62\uff0c\u4f7f\u5176\u9002\u5408\u5355\u72ec\uff08\u6216\u591a\u6216\u5c11\u6210\u6bd4\u4f8b\uff09\u7684\u6c34\u5e73\u5bbd\u5ea6\u3002 \u8fd9\u4e0epwid\u7684\u4e0d\u540c\u4e4b\u5904\u5728\u4e8e\u5b83\u4e0d\u80fd\u66ff\u4ee3\u65b0\u7684\u5b57\u5f62\uff08GPOS\uff0c\u800c\u4e0d\u662fGSUB\u529f\u80fd\uff09\u3002\u7528\u6237\u53ef\u80fd\u66f4\u559c\u6b22\u7b49\u5bbd\u7684\u5f62\u5f0f\uff0c\u6216\u8005\u53ef\u80fd\u53ea\u662f\u60f3\u786e\u4fdd\u5b57\u5f62\u9002\u5408\u5e76\u4e14\u4e0d\u5728\u5782\u76f4\u8bbe\u7f6e\u4e2d\u65cb\u8f6c\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_150448.png\" width=\"552\" height=\"168\" alt=\"\u65e5\u6587\u5047\u540d\u6bd4\u4f8b\u5bbd\u5ea6\u793a\u610f2\" class=\"alignnone size-medium\" \/><\/p>\n<h4 id=\"#pkna\">Proportional Kana: pkna<\/h4>\n<p>\u6b64\u529f\u80fd\u4f7f\u7528\u6bd4\u4f8b\u5b57\u5f62\u66ff\u6362\u5728\u5747\u5300\u5bbd\u5ea6\uff08\u534a\u5bbd\u6216\u5168\u5bbd\uff09\u4e0a\u8bbe\u7f6e\u7684\u5047\u540d\u548c\u5047\u540d\u76f8\u5173\u5b57\u5f62\u3002\u5b83\u7c7b\u4f3c\u4e8e\u6bd4\u4f8b\u5bbd\u5ea6\u529f\u80fd\uff0c\u4f46\u4ec5\u5f71\u54cd\u5047\u540d\u3002<\/p>\n<p>\u65e5\u8bed\u4f53\u7cfb\u4e2d\u6709\u6548\uff0c\u4e0d\u5c55\u5f00\uff0c\u7565~<\/p>\n<h4 id=\"#fwid\">Full Widths: fwid<\/h4>\n<p>\u6b64\u529f\u80fd\u4f7f\u7528\u5728\u5b8c\u6574\uff08\u901a\u5e38\u4e3aem\uff09\u5bbd\u5ea6\u4e0a\u8bbe\u7f6e\u7684\u5b57\u5f62\u66ff\u6362\u5728\u5176\u4ed6\u5bbd\u5ea6\u4e0a\u8bbe\u7f6e\u7684\u5b57\u5f62\u3002\u5728CJKV\u5b57\u4f53\u4e2d\uff0c\u8fd9\u53ef\u80fd\u5305\u62ec\u201c\u4f4eASCII\u201d\u62c9\u4e01\u5b57\u7b26\u548c\u5404\u79cd\u7b26\u53f7\u3002\u5728\u6b27\u6d32\u5b57\u4f53\u4e2d\uff0c\u6b64\u529f\u80fd\u4f7f\u7528\u7b49\u5bbd\u5b57\u5f62\u66ff\u6362\u6309\u6bd4\u4f8b\u95f4\u9694\u7684\u5b57\u5f62\uff0c\u8fd9\u4e9b\u5b57\u5f62\u901a\u5e38\u8bbe\u7f6e\u4e3a0.6em\u7684\u5bbd\u5ea6\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_151705.png\" width=\"120\" height=\"115\" alt=\"\u5b57\u7b26\u5168\u5bbd\" class=\"alignnone size-medium\" \/><\/p>\n<pre>.fwid { font-feature-settings: \"fwid\"; }<\/pre>\n<h4 id=\"#hwid\">Half Widths: hwid<\/h4>\n<p>\u67d0\u4e9b\u5b57\u7b26\u5360\u636eem\u4e00\u534a\u5bbd\u5ea6\u3002\u56fe\u7565\uff0c\u53ef\u5bf9\u6bd4\u4e0b\u9762\u76841\/4\u5bbd\u8111\u8865\u3002<\/p>\n<h4 id=\"#halt\">Alternate Half Widths: halt<\/h4>\n<p>\u6b64\u529f\u80fd\u91cd\u65b0\u8bbe\u7f6e\u4e86\u8bbe\u8ba1\u4e3a\u5168\u5bbd\u5ea6\u5bbd\u5ea6\u7684\u5b57\u5f62\uff0c\u4f7f\u5b83\u4eec\u9002\u5408\u534a\u5bbd\u5bbd\u5ea6\u3002 \u8fd9\u4e0e<code>\"hwid\"<\/code>\u7684\u4e0d\u540c\u4e4b\u5904\u5728\u4e8e\u5b83\u4e0d\u80fd\u66ff\u4ee3\u4e3a\u65b0\u7684\u5b57\u5f62\u3002<\/p>\n<p>\u4f8b\u5982\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6709\u4e9b\u6807\u70b9\u867d\u7136\u5b57\u5f62\u5f88\u5c0f\uff0c\u4f46\u4f9d\u7136\u5360\u636e1em\u5bbd\u5ea6\uff0c\u5c31\u663e\u5f97\u5f88\u7a00\u758f\uff0c\u4f8b\u5982\uff1a\u300c\u4f5c\u8005\uff1a\u5f20\u946b\u65ed\u300d\u3002\u8fd9\u91cc\u7684\u5192\u53f7\u548c\u300c\u4e4b\u95f4\u8ddd\u79bb\u5c31\u5f88\u5f00\uff0c\u5982\u679c\u8868\u73b0\u4e3a\u534a\u5bbd\u5ea6\uff0c\u5219\u751a\u597d\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_152406.png\" width=\"348\" height=\"114\" alt=\"\u534a\u5bbd\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\uff1a<\/p>\n<pre>.halt { font-feature-settings: \"halt\"; }<\/pre>\n<h4 id=\"#twid\">Third Widths: twid<\/h4>\n<p>1\/3\u5bbd\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_152709.png\" width=\"155\" height=\"106\" alt=\"1\/3\u5bbd\u793a\u610f\" class=\"alignnone size-medium\" \/><\/p>\n<pre>.twid { font-feature-settings: \"twid\"; }<\/pre>\n<h4 id=\"#qwid\">Quarter Widths: qwid<\/h4>\n<p>1\/4\u5bbd\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_153150.png\" width=\"181\" height=\"103\" alt=\"1\/4\u5bbd\" class=\"alignnone size-medium\" \/><\/p>\n<pre>.qwid { font-feature-settings: \"qwid\"; }<\/pre>\n<h4 id=\"#jp78\">JIS78 Forms: jp78<\/h4>\n<p>\u65e5\u8bed\u5b57\u5f62\u67d0\u89c4\u8303\u5f62\u5f0f\uff0c\u6211\u4eec\u7528\u4e0d\u5230\uff0c\u7565~<\/p>\n<h4 id=\"#jp83\">JIS83 Forms: jp83<\/h4>\n<p>\u65e5\u8bed\u5b57\u5f62\u67d0\u89c4\u8303\u5f62\u5f0f\uff0c\u6211\u4eec\u7528\u4e0d\u5230\uff0c\u7565~<\/p>\n<h4 id=\"#jp90\">JIS90 Forms: jp90<\/h4>\n<p>\u65e5\u8bed\u5b57\u5f62\u67d0\u89c4\u8303\u5f62\u5f0f\uff0c\u6211\u4eec\u7528\u4e0d\u5230\uff0c\u7565~<\/p>\n<h4 id=\"#jp04\">JIS2004 Forms: jp04<\/h4>\n<p>\u65e5\u8bed\u5b57\u5f62\u67d0\u89c4\u8303\u5f62\u5f0f\uff0c\u6211\u4eec\u7528\u4e0d\u5230\uff0c\u7565~<\/p>\n<h4 id=\"#trad\">Traditional Forms: trad<\/h4>\n<p>\u7528\u76f8\u5e94\u7684\u201c\u7e41\u4f53\u201d\u5f62\u5f0f\u53d6\u4ee3\u201c\u7b80\u4f53\u201d\u7684\u4e2d\u56fd\u6c49\u5b57\u6216\u65e5\u672c\u6c49\u5b57\u5f62\u5f0f\u3002<\/p>\n<p>\u5728<a href=\"https:\/\/fonts.adobe.com\/fonts\/kozuka-mincho-pr6n\" rel=\"noopener\" target=\"_blank\">Adobe\u7684Kozuka Mincho\u7cfb\u7edf\u65e5\u6587\u5b57\u4f53<\/a>\u4e2d\u6709\u6548\uff0c\u4e2d\u6587\u5b57\u4f53\u76ee\u524d\u6ca1\u6709\u770b\u5230\u8c01\u5bf9\u6b64\u6709\u6240\u8bbe\u8ba1\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_154013.png\" width=\"208\" height=\"108\" alt=\"\u7b80\u4f53\u663e\u793a\u4e3a\u7e41\u4f53\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u4f7f\u7528\uff1a<\/p>\n<pre>.trad { font-feature-settings: \"trad\"; }<\/pre>\n<h4 id=\"#expt\">Expert Forms: expt<\/h4>\n<p>\u65e5\u8bed\u4e2d\u6709\u6548\uff0c\u4e0d\u5fc5\u4e86\u89e3\u3002<\/p>\n<h4 id=\"#hojo\">Hojo Kanji Forms: hojo<\/h4>\n<p>\u65e5\u8bed\u4e2d\u6709\u6548\uff0c\u4e0d\u5fc5\u4e86\u89e3\u3002<\/p>\n<h4 id=\"#nlck\">NLC Kanji Forms: nlck<\/h4>\n<p>\u65e5\u8bed\u4e2d\u6709\u6548\uff0c\u4e0d\u5fc5\u4e86\u89e3\u3002<\/p>\n<h4 id=\"#ruby\">Ruby Notation Forms: ruby<\/h4>\n<p>\u65e5\u8bed\u4f53\u7cfb\u4e2d\u6709\u6548\uff0c\u4e0d\u5c55\u5f00\uff0c\u7565~<\/p>\n<h4 id=\"#hkna\">Horizontal Kana Alternates: hkna<\/h4>\n<p>\u6b64\u529f\u80fd\u5c06\u6807\u51c6\u5047\u540d\u66ff\u6362\u4e3a\u4e13\u95e8\u4e3a\u4ec5\u6c34\u5e73\u4e66\u5199\u800c\u8bbe\u8ba1\u7684\u5f62\u5f0f\u3002\u8fd9\u662f\u4e00\u79cd\u5370\u5237\u4f18\u5316\u65b9\u6cd5\uff0c\u53ef\u4ee5\u6539\u5584\u8d34\u5408\u5ea6\uff0c\u4f7f\u989c\u8272\u66f4\u5747\u5300\u3002<\/p>\n<p>\u65e5\u8bed\u4e13\u7528\uff0c\u6211\u4eec\u6c49\u5b57\u7528\u4e0d\u5230\uff0c\u4e0d\u5c55\u5f00~<\/p>\n<h4 id=\"#nalt\">Alternate Annotation Forms: nalt<\/h4>\n<p>\u6b64\u529f\u80fd\u7528\u5404\u79cd\u7b26\u53f7\u5f62\u5f0f\u66ff\u6362\u9ed8\u8ba4\u5b57\u5f62\uff08\u4f8b\u5982\uff0c\u653e\u7f6e\u5728\u7a7a\u5fc3\u5706\u5708\u6216\u5b9e\u5fc3\u5706\u5708\uff0c\u6b63\u65b9\u5f62\uff0c\u5706\u62ec\u53f7\uff0c\u83f1\u5f62\u6216\u5706\u5f62\u6846\u4e2d\u7684\u5b57\u5f62\uff09\u3002 \u5728\u67d0\u4e9b\u60c5\u51b5\u4e0b\uff0c\u6ce8\u91ca\u53ef\u80fd\u5df2\u7ecf\u5b58\u5728\uff0c\u4f46\u662f\u7528\u6237\u53ef\u80fd\u60f3\u8981\u4e0d\u540c\u7684\u6ce8\u91ca\u5f62\u5f0f\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_155114.png\" width=\"643\" height=\"77\" alt=\"\u4e00\u4e2a\u5b57\u7b26\u591a\u79cd\u5f62\u5f0f\" class=\"alignnone size-medium\" \/><\/p>\n<p>\u4e0a\u9762\u622a\u56fe\uff0c\u4f9d\u6b21\u4f7f\u7528\u7684CSS\u5982\u4e0b\uff1a<\/p>\n<pre>.nalt { font-feature-settings: \"nalt\"; }\r\n.nalt-1 { font-feature-settings: \"nalt\" 1; }\r\n.nalt-2 { font-feature-settings: \"nalt\" 2; }\r\n.nalt-3 { font-feature-settings: \"nalt\" 3; }\r\n.nalt-4 { font-feature-settings: \"nalt\" 4; }\r\n.nalt-5 { font-feature-settings: \"nalt\" 5; }\r\n.nalt-6 { font-feature-settings: \"nalt\" 6; }\r\n.nalt-7 { font-feature-settings: \"nalt\" 7; }<\/pre>\n<h4 id=\"#ital\">Italics: ital<\/h4>\n<p>\u67d0\u4e9b\u5b57\u4f53\uff08\u4f8b\u5982Adobe\u7684Pro\u65e5\u8bed\u5b57\u4f53\uff09\u67d0\u4e9b\u5b57\u7b26\u540c\u65f6\u5305\u542b\u7f57\u9a6c\u5b57\u5f62\u548c\u659c\u4f53\u5b57\u5f62\u3002\u6b64\u529f\u80fd\u5c06\u7f57\u9a6c\u5b57\u5f62\u66ff\u6362\u4e3a\u76f8\u5e94\u7684\u659c\u4f53\u5b57\u5f62\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/2018-12-09_155441.png\" width=\"624\" height=\"166\" alt=\"\u5b57\u4f53\u4e2d\u7f57\u9a6c\u5b57\u5f62\u8868\u73b0\u4e3a\u659c\u4f53\" class=\"alignnone size-medium\" \/><\/p>\n<p>CSS\u793a\u610f\uff1a<\/p>\n<pre>.ital { font-feature-settings: \"ital\"; }<\/pre>\n<h4 id=\"#vkrn\">Vertical Kerning: vkrn<\/h4>\n<p>\u6b64\u529f\u80fd\u53ef\u8c03\u6574\u5b57\u5f62\u4e4b\u95f4\u7684\u7a7a\u95f4\u91cf\uff0c\u901a\u5e38\u53ef\u5728\u5b57\u5f62\u4e4b\u95f4\u63d0\u4f9b\u89c6\u89c9\u4e0a\u4e00\u81f4\u7684\u95f4\u8ddd\u3002 \u867d\u7136\u8bbe\u8ba1\u826f\u597d\u7684\u5b57\u4f53\u603b\u4f53\u4e0a\u5177\u6709\u4e00\u81f4\u7684\u5b57\u5f62\u95f4\u8ddd\uff0c\u4f46\u662f\u4e00\u4e9b\u5b57\u5f62\u7ec4\u5408\u9700\u8981\u8c03\u6574\u4ee5\u63d0\u9ad8\u6613\u8bfb\u6027\u3002 \u9664\u4e86\u5782\u76f4\u65b9\u5411\u7684\u6807\u51c6\u8c03\u6574\u4e4b\u5916\uff0c\u8be5\u529f\u80fd\u8fd8\u53ef\u4ee5\u901a\u8fc7\u8bbe\u5907\u8868\u63d0\u4f9b\u4e0e\u5c3a\u5bf8\u76f8\u5173\u7684\u5b57\u8ddd\u8c03\u6574\u6570\u636e\uff0c\u5728X\u6587\u672c\u65b9\u5411\u4e0a\u63d0\u4f9b\u201c\u4ea4\u53c9\u6d41\u201d\u5b57\u8ddd\u8c03\u6574\uff0c\u5e76\u4e14\u53ef\u4ee5\u8c03\u6574\u5b57\u5f62\u4f4d\u7f6e\uff0c\u800c\u4e0e\u63d0\u524d\u8c03\u6574\u65e0\u5173\u3002 \u8bf7\u6ce8\u610f\uff0c\u6b64\u529f\u80fd\u53ef\u80fd\u9002\u7528\u4e8e\u4e24\u4e2a\u4ee5\u4e0a\u5b57\u5f62\u7684\u8fd0\u884c\uff0c\u5e76\u4e14\u4e0d\u4f1a\u7528\u4e8e\u7b49\u5bbd\u5b57\u4f53\u3002 \u53e6\u8bf7\u6ce8\u610f\uff0c\u6b64\u529f\u80fd\u4ec5\u9002\u7528\u4e8e\u5782\u76f4\u8bbe\u7f6e\u7684\u6587\u672c\u3002<\/p>\n<pre>.vkrn { font-feature-settings: \"vkrn\"; }<\/pre>\n<h4 id=\"#vert\">Vertical Alternates: vert<\/h4>\n<p>\u5728\u5782\u76f4\u4e66\u5199\u6a21\u5f0f\u4e0b\uff0c\u6b64\u529f\u80fd\u4f7f\u7528\u9488\u5bf9\u5782\u76f4\u4e66\u5199\u8c03\u6574\u7684\u53d8\u4f53\u66ff\u6362\u9ed8\u8ba4\u8868\u5355\u3002 \u867d\u7136\u5927\u591a\u6570CJKV\u5b57\u5f62\u5728\u5782\u76f4\u4e66\u5199\u6a21\u5f0f\u4e0b\u4fdd\u6301\u5782\u76f4\uff0c\u4f46\u6709\u4e9b\u5b57\u4f53\u91c7\u7528\u4e0d\u540c\u7684\u5f62\u5f0f\uff08\u901a\u5e38\u662f\u65cb\u8f6c\u548c\u91cd\u65b0\u5b9a\u4f4d\uff09\u3002 \u6b64\u529f\u80fd\u6db5\u76d6\u7684\u5b57\u5f62\u5bf9\u5e94\u4e8e\u901a\u5e38\u5728\u4f4e\u7aefDTP\u5e94\u7528\u7a0b\u5e8f\u4e2d\u65cb\u8f6c\u7684\u5b57\u7b26\u96c6\u3002<\/p>\n<pre>.vert { font-feature-settings: \"vert\"; }<\/pre>\n<h4 id=\"#vpal\">Proportional Alternate Vertical Metrics: vpal<\/h4>\n<p>\u6b64\u529f\u80fd\u53ef\u91cd\u65b0\u8bbe\u7f6e\u8bbe\u8ba1\u4e3a\u5168\u9ad8\u5ea6\u7684\u5b57\u5f62\uff0c\u4f7f\u5176\u9002\u5408\u5355\u4e2a\uff08\u6216\u591a\u6216\u5c11\u6bd4\u4f8b\uff09\u5782\u76f4\u9ad8\u5ea6\u3002 \u8fd9\u4e0evalt\u7684\u4e0d\u540c\u4e4b\u5904\u5728\u4e8e\u5b83\u4e0d\u80fd\u66ff\u4ee3\u65b0\u7684\u5b57\u5f62\uff08GPOS\uff0c\u800c\u4e0d\u662fGSUB\u7279\u5f81\uff09\u3002 \u7528\u6237\u53ef\u80fd\u66f4\u559c\u6b22\u7b49\u5bbd\u7684\u5f62\u5f0f\uff0c\u6216\u8005\u53ef\u80fd\u53ea\u662f\u60f3\u786e\u4fdd\u5b57\u5f62\u9002\u5408\u3002<\/p>\n<pre>.vpal { font-feature-settings: \"vpal\"; }<\/pre>\n<h4 id=\"#vhal\">Alternate Vertical Half Metrics: vhal<\/h4>\n<p>\u6b64\u529f\u80fd\u53ef\u91cd\u65b0\u8bbe\u7f6e\u8bbe\u8ba1\u4e3a\u5168\u9ad8\u5ea6\u7684\u5b57\u5f62\uff0c\u4f7f\u5176\u9002\u5408\u534a\u9ad8\u3002<\/p>\n<pre>.vhal { font-feature-settings: \"vhal\"; }<\/pre>\n<h4 id=\"#vkna\">Vertical Kana Alternates: vkna<\/h4>\n<p>\u6b64\u529f\u80fd\u4f7f\u7528\u4e13\u95e8\u4e3a\u5782\u76f4\u4e66\u5199\u8bbe\u8ba1\u7684\u8868\u5355\u66ff\u6362\u6807\u51c6\u5047\u540d\u3002 \u8fd9\u662f\u4e00\u79cd\u5370\u5237\u4f18\u5316\uff0c\u53ef\u4ee5\u6539\u5584\u8d34\u5408\u5ea6\uff0c\u4f7f\u989c\u8272\u66f4\u5747\u5300\u3002<\/p>\n<pre>.vkna { font-feature-settings: \"vkna\"; }<\/pre>\n<h4 id=\"#others\">\u5176\u4ed6\uff1aothers<\/h4>\n<p>\u8fd8\u6709\u5f88\u591a\u5176\u4ed6\u7279\u5f81\u5173\u952e\u5b57\uff0c\u6d4f\u89c8\u5668\u5c1a\u672a\u6765\u5f97\u53ca\u8ddf\u8fdb\uff0c\u6709\u5174\u8da3\u53ef\u4ee5\u53c2\u89c1\u8fd9\u91cc\uff1a<a href=\"https:\/\/docs.microsoft.com\/zh-cn\/typography\/opentype\/spec\/featuretags\" rel=\"noopener\" target=\"_blank\">Feature tags<\/a><\/p>\n<h3>\u56db\u3001\u5199\u5728\u6700\u540e\u70b9\u5185\u5bb9<\/h3>\n<p>Stop\uff01Stop\uff01\u4e0d\u80fd\u518d\u591a\u8bf4\u4ec0\u4e48\u4e86\uff0c\u8fd9\u9875\u9762\u6eda\u52a8\u9ad8\u5ea6\u8981\u76f4\u903c10,000\u50cf\u7d20+\u4e86\u3002<\/p>\n<p>\u8fd8\u662f\u8bf4\u4e00\u53e5\u5427\uff1a\u524d\u6bb5\u65f6\u95f4\uff0c\u8bbe\u8ba1\u5e08\u7ed9\u6211\u63d0\u4e86\u4e2a\u9700\u6c42\uff0c\u8f93\u5165\u6cd5\u8f93\u5165\u7684\u662f\u7b80\u4f53\uff0c\u5448\u73b0\u7684\u662f\u7e41\u4f53\u3002\u7406\u8bba\u4e0a\u8bb2\uff0cfont-feature-settings\u53ef\u4ee5\u5b9e\u73b0\u3002\u7136\u800c\uff0c\u5c34\u5c2c\u5728\u4e8e\uff0c\u6ca1\u6709\u4e2d\u6587\u5b57\u4f53\u5728Design\u7684\u65f6\u5019\u7559\u4e0b\u8fd9\u4e2a\u529f\u80fd\u7279\u5f81\uff0c\u6709\u80fd\u529b\u6ca1\u6750\u6599\u3002<\/p>\n<p>font-feature-settings\u867d\u7136\u53ef\u4ee5\u8ba9\u5b57\u4f53\u5448\u73b0\u66f4\u52a0\u7cbe\u81f4\uff0c\u66f4\u52a0\u4e30\u5bcc\u3002\u4f46\uff0c\u5982\u679c\u6ca1\u6709\u4f18\u79c0\u8bbe\u8ba1\u5e08\u8bbe\u8ba1\u51fa\u5bf9\u5e94\u7684\u5b57\u4f53\uff0c\u5219\uff0c\u4e00\u5207\u90fd\u662f\u955c\u4e2d\u6c34\u6708\u2014\u2014\u865a\u7684\u3002\u82f1\u6587\u548c\u6570\u5b57\u6570\u91cf\u6709\u9650\uff0c\u56e0\u6b64\uff0c\u8bbe\u8ba1\u6210\u672c\u4f4e\uff0c\u624d\u6709\u4e86\u4e30\u5bcc\u591a\u5f69\u7684\u5c55\u73b0\u3002\u800c\u4e2d\u6587\u5b57\u4f53\uff0c\u5e38\u89c1\u6c49\u5b57\u5c31\u597d\u51e0\u5343\uff0c\u6210\u672c\u9ad8\uff0c\u4e5f\u662f\u6ca1\u529e\u6cd5\u7684\u65f6\u5019\u3002<\/p>\n<p>\u652f\u6301\u5404\u79cdfont-feature-settings\u7279\u6027\u7684\u65e5\u6587\u5b57\u4f53\u201cKozuka Mincho Pr6N\u201d\u662f\u5b57\u4f53\u8bbe\u8ba1\u5e08Masahiko Kozuka\uff08\u5c0f\u585a\u660c\u5f66\uff09\u8bbe\u8ba1\u7684\uff0c\u4e0d\u77e5\u9053\uff0c\u4ec0\u4e48\u65f6\u5019\u6709\u4f4d\u4f18\u79c0\u7684\u4e2d\u56fd\u8bbe\u8ba1\u5e08\u8bbe\u8ba1\u51fa\u4e00\u6b3e\u5b57\u4f53\uff0c\u5305\u542b\u4e30\u5bcc\u7684feature\u3002<\/p>\n<p><strong>\u53c2\u8003\u6587\u6863<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/helpx.adobe.com\/fonts\/using\/open-type-syntax.html\" rel=\"noopener nofollow\" target=\"_blank\">Syntax for OpenType features in CSS<\/a><\/li>\n<li><a href=\"https:\/\/sparanoid.com\/lab\/opentype-features\/\" rel=\"noopener nofollow\" target=\"_blank\">The Complete CSS Demo for OpenType Features<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/zh-cn\/typography\/opentype\/spec\/features_ae\" rel=\"noopener nofollow\" target=\"_blank\">Registered features &#8211; definitions and implementations<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-feature-settings\" rel=\"noopener\" target=\"_blank\">MDN font-feature-settings<\/a><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/emtion\/emoji\/1f603.svg\" width=\"20\" height=\"20\" align=\"absmiddle\"><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8238\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=8238<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201812\/look-good.png\" width=\"161\" height=\"100\" alt=\"CSS font-feature-settings\" class=\"alignright size-medium\" \/><\/p>\n<p>CSS font-feature-settings\u5c5e\u6027\u63a7\u5236OpenType\u5b57\u4f53\u4e2d\u7684\u9ad8\u7ea7\u6392\u7248\u529f\u80fd\uff0c\u4e5f\u5c31\u662f\u53ef\u4ee5\u8ba9OpenType\u5b57\u4f53\u6392\u7248\u66f4\u52a0\u7cbe\u81f4\uff0c\u7b26\u5408\u5b9e\u9645\u5f00\u53d1\u9700\u8981\u3002<\/p>\n<p>\u517c\u5bb9\u6027\u5f88\u4e0d\u9519\uff0c\u652f\u6301\u7684\u7279\u5f81\u5173\u952e\u6807\u7b7e\u4e5f\u5f88\u591a\uff0c\u90fd\u662f4\u4e2a\u5b57\u6bcd\uff0c\u5168\u90e8\u52a0\u8d77\u6765\uff0c\u53ef\u80fd\u4e0a\u767e\u8981\u7684\uff0c\u672c\u6587\u4e3b\u8981\u4ecb\u7ecd\u6d4f\u89c8\u5668\u80fd\u591f\u652f\u6301\u7684\u4e00\u4e9b\u7279\u5f81\u6807\u7b7e\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1271,416,1109,1106,1108,1107,418,258],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/8238"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=8238"}],"version-history":[{"count":0,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/8238\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=8238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=8238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=8238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}