diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 73b7dc2c62..82968408e8 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -1,5 +1,12 @@ @import "../color/colors"; +// http://stackoverflow.com/a/13611748/3040605 +@font-face { + font-family: "Helvetica Neue For Number"; + src: local("Helvetica Neue"); + unicode-range: U+30-39; +} + // Prefix @ant-prefix : ant; @@ -26,7 +33,7 @@ // ------ Base & Require ------ @body-background : #fff; @component-background : #fff; -@font-family : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family : "Helvetica Neue For Number", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; @code-family : Consolas, Menlo, Courier, monospace; @heading-color : fade(#000, 85%); @text-color : fade(#000, 65%); diff --git a/docs/spec/font.md b/docs/spec/font.md index 37d95d2898..e6be5c0a6b 100644 --- a/docs/spec/font.md +++ b/docs/spec/font.md @@ -29,6 +29,10 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, > 参考自:https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ +另外,在中后台系统中,数字经常需要进行纵向对比展示,我们单独将数字的字体设置为 `Helvetica Neue`,使其为等宽字体。 + +> 技术方案:http://stackoverflow.com/questions/13611420/set-a-font-specifically-for-all-numbers-on-the-page + ## 字号 Ant Design 使用不同的字号和字重来传递视觉的信息层次。默认字体为 `12pt`,展示型页面可以设置为 `14pt`,其他字体字号相应升级。 diff --git a/site/theme/static/common.less b/site/theme/static/common.less index 384c9e5438..dc819374b5 100644 --- a/site/theme/static/common.less +++ b/site/theme/static/common.less @@ -9,7 +9,7 @@ body { } body { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + font-family: @font-family; line-height: 1.5; color: @text-color; font-size: 14px; @@ -46,7 +46,7 @@ a { .aside-container { padding-bottom: 50px; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + font-family: Lato, @font-family; &.ant-menu-inline .ant-menu-submenu-title h4, &.ant-menu-inline > .ant-menu-item, diff --git a/site/theme/static/header.less b/site/theme/static/header.less index d43212c03f..27efeae366 100644 --- a/site/theme/static/header.less +++ b/site/theme/static/header.less @@ -78,7 +78,7 @@ border: 0; float: right; font-size: 14px; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + font-family: Lato, @font-family; } #nav li { diff --git a/site/theme/static/home.less b/site/theme/static/home.less index feeb618662..7cdfc51ce4 100644 --- a/site/theme/static/home.less +++ b/site/theme/static/home.less @@ -10,7 +10,7 @@ top: 53%; color: #fff; text-align: right; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + font-family: Lato, @font-family; } .banner-text-wrapper h2 { font-size: 40px; @@ -108,7 +108,7 @@ position: relative; top: 20%; left: -30px; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + font-family: Lato, @font-family; z-index: 1; } .text-wrapper h2, diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less index cb8ce60701..0c7ce21bcf 100644 --- a/site/theme/static/markdown.less +++ b/site/theme/static/markdown.less @@ -19,7 +19,7 @@ line-height: 40px; margin-bottom: 24px; margin-top: 8px; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + font-family: Lato, @font-family; .subtitle { font-weight: normal; @@ -34,7 +34,7 @@ .markdown h5, .markdown h6 { color: @heading-color; - font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; + font-family: Lato, @font-family; margin: 1.6em 0 0.6em; font-weight: 500; clear: both;