Files
ant-design/docs/spec/font.html
T
2017-03-13 14:26:19 +08:00

111 lines
25 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
<meta name="description" content="A set of high-quality React components">
<meta name="description" content="One of best React UI library for enterprise background">
<title>Ant Design - A UI Design Language</title>
<script>
(function() {
function isLocalStorageNameSupported() {
var testKey = 'test';
var storage = window.localStorage;
try {
storage.setItem(testKey, '1');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 优先级提高到所有静态资源的前面,语言不对,加载其他静态资源没意义
var pathname = location.pathname;
function isZhCN(pathname) {
return /-cn\/?$/.test(pathname);
}
function getLocalizedPathname(path, zhCN) {
var pathname = path.startsWith('/') ? path : '/' + path;
if (!zhCN) { // to enUS
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
} else if (pathname === '/') {
return '/index-cn';
} else if (pathname.endsWith('/')) {
return pathname.replace(/\/$/, '-cn/');
}
return pathname + '-cn';
}
// 兼容旧的 URL `?locale=...`
var queryString = location.search;
if (queryString) {
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig && !isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
// safari is 'zh-cn', while other browser is 'zh-CN';
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
}
}
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
})()
</script>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
<link rel="stylesheet" type="text/css" href="/index.css"/>
<style id="nprogress-style">
#nprogress { display: none }
</style>
<!--[if lte IE 10]>
<script
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
<![endif]-->
<script>
if (!window.Intl) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
}
if (!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
}
// Enable Google Analytics
if (!location.port) {
/* eslint-disable */
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-72788897-1', 'auto');
ga('send', 'pageview');
/* eslint-enable */
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="2114589730"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Specification</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Pattern</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resource</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/spec/introduce" data-reactid="52">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/spec/cases" data-reactid="54">Cases</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/spec/feature" data-reactid="56">Features</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="57"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Principles$Menu" aria-haspopup="true" data-reactid="58"><h4 data-reactid="59">Principles</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Principles$Menu" data-reactid="60"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/docs/spec/principle" data-reactid="62">Introduction</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/spec/proximity" data-reactid="64">Proximity</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="/docs/spec/alignment" data-reactid="66">Alignment</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="/docs/spec/contrast" data-reactid="68">Contrast</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="69"><a href="/docs/spec/repetition" data-reactid="70">Repetition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="71"><a href="/docs/spec/direct" data-reactid="72">Make it Direct</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="73"><a href="/docs/spec/lightweight" data-reactid="74">Keep it Lightweight</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="75"><a href="/docs/spec/stay" data-reactid="76">Stay on the Page</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/docs/spec/invitation" data-reactid="78">Provide an Invitation</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="79"><a href="/docs/spec/transition" data-reactid="80">Use Transition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/docs/spec/reaction" data-reactid="82">React Immediately</a></li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="83"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Design Fundamental$Menu" aria-haspopup="true" data-reactid="84"><h4 data-reactid="85">Design Fundamental</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Design Fundamental$Menu" data-reactid="86"><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="87"><a href="/docs/spec/font" data-reactid="88">Font</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/docs/spec/typography" data-reactid="90">Typography</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="91"><a href="/docs/spec/colors" data-reactid="92">Colors</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/docs/spec/layout" data-reactid="94">Layout</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="95"><a href="/docs/spec/motion" data-reactid="96">Motion</a></li></ul></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="97"><article class="markdown" data-reactid="98"><h1 data-reactid="99"><!-- react-text: 100 -->Font<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/font.md" data-reactid="101"><i class="anticon anticon-edit" data-reactid="102"></i></a></h1><section class="markdown" data-reactid="103"><p data-reactid="104"><!-- react-text: 105 -->跨平台的字体设定,力求在各个操作系统下都有最佳展示效果。<!-- /react-text --></p><p data-reactid="106"><!-- react-text: 107 -->字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率。Ant Design 的字体方案,在满足不同终端始终保持良好的阅读体验的同时,使页面的视觉层次更加清晰。使用时有以下三点需要注意:<!-- /react-text --></p><ul data-reactid="108"><li data-reactid="109"><p data-reactid="110"><!-- react-text: 111 -->合理的使用不同的字重、字号和颜色来强调界面中最重要的信息;<!-- /react-text --></p></li><li data-reactid="112"><p data-reactid="113"><!-- react-text: 114 -->尽可能的使用单种字体,混合使用多种字体会让界面看起来零散和草率;<!-- /react-text --></p></li><li data-reactid="115"><p data-reactid="116"><!-- react-text: 117 -->遵循 WCAG 2.0 标准,字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准。<!-- /react-text --></p></li></ul></section><section class="toc" data-reactid="118"><ul data-reactid="119"><li data-reactid="120"><a class="bisheng-toc-h2" href="#字体家族" data-reactid="121"><!-- react-text: 122 -->字体家族<!-- /react-text --></a></li><li data-reactid="123"><a class="bisheng-toc-h2" href="#字号" data-reactid="124"><!-- react-text: 125 -->字号<!-- /react-text --></a></li><li data-reactid="126"><a class="bisheng-toc-h2" href="#行高" data-reactid="127"><!-- react-text: 128 -->行高<!-- /react-text --></a></li><li data-reactid="129"><a class="bisheng-toc-h2" href="#字体颜色" data-reactid="130"><!-- react-text: 131 -->字体颜色<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="132"><h2 id="字体家族" data-reactid="133"><span data-reactid="134"><!-- react-text: 135 -->字体家族<!-- /react-text --></span><a href="#字体家族" class="anchor" data-reactid="136">#</a></h2><p data-reactid="137"><!-- react-text: 138 -->字体家族 css 代码如下:<!-- /react-text --></p><p data-reactid="139"><!-- react-text: 140 -->优秀的字体系统的核心是选择一个好的字体。Ant Design 的字体家族中优先使用系统默认的界面字体,同时提供了一套利于屏显的备用字体库,来维护在不同平台以及浏览器的显示下字体始终保持良好的易读性和可读性,体现了友好,稳定和专业的特性。<!-- /react-text --></p><pre class="language-css" data-reactid="141"><code data-reactid="142"><span class="token property">font-family</span><span class="token punctuation">:</span> -apple-system, BlinkMacSystemFont, <span class="token string">"Segoe UI"</span>, Roboto,
<span class="token string">"Helvetica Neue"</span>, Helvetica, <span class="token string">"PingFang SC"</span>, <span class="token string">"Hiragino Sans GB"</span>, <span class="token string">"Microsoft YaHei"</span>,
SimSun, sans-serif<span class="token punctuation">;</span></code></pre><blockquote data-reactid="143"><p data-reactid="144"><!-- react-text: 145 -->参考自:<!-- /react-text --><a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/" data-reactid="146"><!-- react-text: 147 -->https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/<!-- /react-text --></a></p></blockquote><h2 id="字号" data-reactid="148"><span data-reactid="149"><!-- react-text: 150 -->字号<!-- /react-text --></span><a href="#字号" class="anchor" data-reactid="151">#</a></h2><p data-reactid="152"><!-- react-text: 153 -->Ant Design 使用不同的字号和字重来传递视觉的信息层次。默认字体为 <!-- /react-text --><code data-reactid="154"><!-- react-text: 155 -->12pt<!-- /react-text --></code><!-- react-text: 156 -->,展示型页面可以设置为 <!-- /react-text --><code data-reactid="157"><!-- react-text: 158 -->14pt<!-- /react-text --></code><!-- react-text: 159 -->,其他字体字号相应升级。<!-- /react-text --></p><p data-reactid="160"><img src="https://zos.alipayobjects.com/rmsportal/UkvKkdJgvFqlewCWFyQE.png" data-reactid="161"/></p><h2 id="行高" data-reactid="162"><span data-reactid="163"><!-- react-text: 164 -->行高<!-- /react-text --></span><a href="#行高" class="anchor" data-reactid="165">#</a></h2><p data-reactid="166"><!-- react-text: 167 -->行高会影响阅读的体验,西文的基本行高通常是字号的 <!-- /react-text --><code data-reactid="168"><!-- react-text: 169 -->1.2em<!-- /react-text --></code><!-- react-text: 170 --> 上下,而中文因为字符密实且高度一致,所以一般行高需要更大,<!-- /react-text --><code data-reactid="171"><!-- react-text: 172 -->1.5em<!-- /react-text --></code><!-- react-text: 173 --><!-- /react-text --><code data-reactid="174"><!-- react-text: 175 -->1.8em<!-- /react-text --></code><!-- react-text: 176 --> 之间是一个比较好的视觉阅读效果,Ant Design 规定默认文案字体行高为 <!-- /react-text --><code data-reactid="177"><!-- react-text: 178 -->1.5em<!-- /react-text --></code><!-- react-text: 179 -->,展示型页面可根据实际情况调整行高。<!-- /react-text --></p><h3 id="行高公式" data-reactid="180"><span data-reactid="181"><!-- react-text: 182 -->行高公式<!-- /react-text --></span><a href="#行高公式" class="anchor" data-reactid="183">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="184"><div class="preview-image-box" data-reactid="185"><div class="preview-image-wrapper false false" data-reactid="186"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/qFKnfXanJURiDsjJTKDP.png" data-reactid="187"/></div><div class="preview-image-title" data-reactid="188"></div><div class="preview-image-description" data-reactid="189"></div><!-- react-empty: 190 --></div></div><p data-reactid="191"><!-- react-text: 192 -->字体行高绝对值为『字号 x 1.5倍』。例如:12 号字体的行高为 <!-- /react-text --><code data-reactid="193"><!-- react-text: 194 -->18px<!-- /react-text --></code><!-- react-text: 195 -->14 号字体的行高为 <!-- /react-text --><code data-reactid="196"><!-- react-text: 197 -->21px<!-- /react-text --></code><!-- react-text: 198 --><!-- /react-text --></p><h2 id="字体颜色" data-reactid="199"><span data-reactid="200"><!-- react-text: 201 -->字体颜色<!-- /react-text --></span><a href="#字体颜色" class="anchor" data-reactid="202">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="203"><div class="preview-image-box" data-reactid="204"><div class="preview-image-wrapper false false" data-reactid="205"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/kNFpUKqccPYxzfiQlFTh.png" data-reactid="206"/></div><div class="preview-image-title" data-reactid="207"></div><div class="preview-image-description" data-reactid="208">注:表格中 @Black = #000000、@White = #FFFFFF、@Blue-6 = #108EE9</div><!-- react-empty: 209 --></div></div><p data-reactid="210"><!-- react-text: 211 -->文本颜色如果和背景颜色太接近就会很难以阅读,这对于深色背景和浅色背景同样适用。<!-- /react-text --></p><p data-reactid="212"><!-- react-text: 213 -->考虑到无障碍设计的需求,帮助那些弱视和色盲的用户也能轻松识别和阅读屏幕上的文字,我们参考了 WACG 2.0 的标准,文本和背景色之间至少保持最小 4.5:1 的对比度(AA 级),正文内容都保持了 7:1 以上的 AAA 级对比度。<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="214"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="215"><section class="prev-next-nav" data-reactid="216"><a class="prev-page" href="/docs/spec/reaction" data-reactid="217">React Immediately</a><a class="next-page" href="/docs/spec/typography" data-reactid="218">Typography</a></section></div></div></div><footer id="footer" data-reactid="219"><ul data-reactid="220"><li data-reactid="221"><h2 data-reactid="222"><i class="anticon anticon-github" data-reactid="223"></i><!-- react-text: 224 --> GitHub<!-- /react-text --></h2><div data-reactid="225"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="226"><span data-reactid="227">Repository</span></a></div><div data-reactid="228"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="229"><span data-reactid="230">Customize Theme</span></a></div><div data-reactid="231"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="232"><span data-reactid="233">Awesome Ant Design</span></a></div></li><li data-reactid="234"><h2 data-reactid="235"><i class="anticon anticon-link" data-reactid="236"></i><!-- react-text: 237 --> <!-- /react-text --><span data-reactid="238">Links</span></h2><div data-reactid="239"><a href="http://mobile.ant.design" data-reactid="240">Ant Design Mobile</a><span data-reactid="241"> - </span><span data-reactid="242">Mobile UI</span></div><div data-reactid="243"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="244">dva</a><!-- react-text: 245 --> - <!-- /react-text --><span data-reactid="246">Framework</span></div><div data-reactid="247"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="248">dva-cli</a><!-- react-text: 249 --> -<!-- /react-text --><span data-reactid="250">Developer Tools</span></div><div data-reactid="251"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="252">Egg</a><span data-reactid="253"> - </span><span data-reactid="254">Enterprise Node Framework</span></div><div data-reactid="255"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="256">AntV</a><span data-reactid="257"> - </span><span data-reactid="258">Data Visualization</span></div><div data-reactid="259"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="260">Ant Motion</a><span data-reactid="261"> - </span><span data-reactid="262">Motion Soluction</span></div><div data-reactid="263"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="264">AntD Library</a><span data-reactid="265"> - </span><span data-reactid="266">Axure library</span></div><div data-reactid="267"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="268">Ant UX</a><span data-reactid="269"> - </span><span data-reactid="270">Sitemap Template</span></div></li><li data-reactid="271"><h2 data-reactid="272"><i class="anticon anticon-customer-service" data-reactid="273"></i><!-- react-text: 274 --> <!-- /react-text --><span data-reactid="275">Community</span></h2><div data-reactid="276"><a href="/changelog" data-reactid="277"><span data-reactid="278">Change Log</span></a></div><div data-reactid="279"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="280"><span data-reactid="281">FAQ</span></a></div><div data-reactid="282"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="283"><span data-reactid="284">Chat Room</span></a></div><div data-reactid="285"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="286"><span data-reactid="287">Bug Report</span></a></div><div data-reactid="288"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="289"><span data-reactid="290">StackOverflow</span></a></div><div data-reactid="291"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="292"><span data-reactid="293">SegmentFault</span></a></div></li><li data-reactid="294"><h2 data-reactid="295"><!-- react-text: 296 -->Copyright © <!-- /react-text --><!-- react-text: 297 -->2017<!-- /react-text --></h2><div data-reactid="298"><span data-reactid="299">Created by Ant UED</span></div><div data-reactid="300"><!-- react-text: 301 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="302">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>