mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
set monospaced font-family for number
This commit is contained in:
parent
cb2460c412
commit
b526083fa6
@ -1,5 +1,12 @@
|
|||||||
@import "../color/colors";
|
@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
|
// Prefix
|
||||||
@ant-prefix : ant;
|
@ant-prefix : ant;
|
||||||
|
|
||||||
@ -26,7 +33,7 @@
|
|||||||
// ------ Base & Require ------
|
// ------ Base & Require ------
|
||||||
@body-background : #fff;
|
@body-background : #fff;
|
||||||
@component-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;
|
@code-family : Consolas, Menlo, Courier, monospace;
|
||||||
@heading-color : fade(#000, 85%);
|
@heading-color : fade(#000, 85%);
|
||||||
@text-color : fade(#000, 65%);
|
@text-color : fade(#000, 65%);
|
||||||
|
@ -29,6 +29,10 @@ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|||||||
|
|
||||||
> 参考自:https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
|
> 参考自: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`,其他字体字号相应升级。
|
Ant Design 使用不同的字号和字重来传递视觉的信息层次。默认字体为 `12pt`,展示型页面可以设置为 `14pt`,其他字体字号相应升级。
|
||||||
|
@ -9,7 +9,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
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;
|
line-height: 1.5;
|
||||||
color: @text-color;
|
color: @text-color;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -46,7 +46,7 @@ a {
|
|||||||
|
|
||||||
.aside-container {
|
.aside-container {
|
||||||
padding-bottom: 50px;
|
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-submenu-title h4,
|
||||||
&.ant-menu-inline > .ant-menu-item,
|
&.ant-menu-inline > .ant-menu-item,
|
||||||
|
@ -78,7 +78,7 @@
|
|||||||
border: 0;
|
border: 0;
|
||||||
float: right;
|
float: right;
|
||||||
font-size: 14px;
|
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 {
|
#nav li {
|
||||||
|
@ -10,7 +10,7 @@
|
|||||||
top: 53%;
|
top: 53%;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-align: right;
|
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 {
|
.banner-text-wrapper h2 {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
@ -108,7 +108,7 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
top: 20%;
|
top: 20%;
|
||||||
left: -30px;
|
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;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
.text-wrapper h2,
|
.text-wrapper h2,
|
||||||
|
@ -19,7 +19,7 @@
|
|||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
margin-top: 8px;
|
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 {
|
.subtitle {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
@ -34,7 +34,7 @@
|
|||||||
.markdown h5,
|
.markdown h5,
|
||||||
.markdown h6 {
|
.markdown h6 {
|
||||||
color: @heading-color;
|
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;
|
margin: 1.6em 0 0.6em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
clear: both;
|
clear: both;
|
||||||
|
Loading…
Reference in New Issue
Block a user