set monospaced font-family for number

ant-design · Mar 31, 2017 · b526083 · b526083
1 parent cb2460c
commit b526083
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;