Merge pull request #5583 from ant-design/optimize-number-font-family

set monospaced font-family for number
This commit is contained in:
偏右 2017-03-31 14:12:24 +08:00 committed by GitHub
commit 203fcf1c60
6 changed files with 19 additions and 8 deletions

View File

@ -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%);

View File

@ -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`,其他字体字号相应升级。

View File

@ -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,

View File

@ -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 {

View File

@ -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,

View File

@ -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;