Typography

Material Design的文字大小和样式是为了在典型的使用条件下平衡内容密度和阅读舒适度而开发的。

MDC Typography是一个基础模块，它将这些样式应用于MDC Web组件。 此模块中的排版样式源自十三种样式：

  • Headline 1
  • Headline 2
  • Headline 3
  • Headline 4
  • Headline 5
  • Headline 6
  • Subtitle 1
  • Subtitle 2
  • Body 1
  • Body 2
  • Caption
  • Button
  • Overline

使用

  1. import * as css from 'omim/typography'
  3. console.log(css)

输出:

  1. .mdc-typography {
  2.   font-family: Roboto, sans-serif;
  3.   -moz-osx-font-smoothing: grayscale;
  4.   -webkit-font-smoothing: antialiased; 
  5. }
  7. .mdc-typography--headline1 {
  8.   font-family: Roboto, sans-serif;
  9.   -moz-osx-font-smoothing: grayscale;
  10.   -webkit-font-smoothing: antialiased;
  11.   font-size: 6rem;
  12.   line-height: 6rem;
  13.   font-weight: 300;
  14.   letter-spacing: -0.01562em;
  15.   text-decoration: inherit;
  16.   text-transform: inherit; 
  17. }
  19. .mdc-typography--headline2 {
  20.   font-family: Roboto, sans-serif;
  21.   -moz-osx-font-smoothing: grayscale;
  22.   -webkit-font-smoothing: antialiased;
  23.   font-size: 3.75rem;
  24.   line-height: 3.75rem;
  25.   font-weight: 300;
  26.   letter-spacing: -0.00833em;
  27.   text-decoration: inherit;
  28.   text-transform: inherit; 
  29. }
  31. .mdc-typography--headline3 {
  32.   font-family: Roboto, sans-serif;
  33.   -moz-osx-font-smoothing: grayscale;
  34.   -webkit-font-smoothing: antialiased;
  35.   font-size: 3rem;
  36.   line-height: 3.125rem;
  37.   font-weight: 400;
  38.   letter-spacing: normal;
  39.   text-decoration: inherit;
  40.   text-transform: inherit; 
  41. }
  43. .mdc-typography--headline4 {
  44.   font-family: Roboto, sans-serif;
  45.   -moz-osx-font-smoothing: grayscale;
  46.   -webkit-font-smoothing: antialiased;
  47.   font-size: 2.125rem;
  48.   line-height: 2.5rem;
  49.   font-weight: 400;
  50.   letter-spacing: 0.00735em;
  51.   text-decoration: inherit;
  52.   text-transform: inherit; 
  53. }
  55. .mdc-typography--headline5 {
  56.   font-family: Roboto, sans-serif;
  57.   -moz-osx-font-smoothing: grayscale;
  58.   -webkit-font-smoothing: antialiased;
  59.   font-size: 1.5rem;
  60.   line-height: 2rem;
  61.   font-weight: 400;
  62.   letter-spacing: normal;
  63.   text-decoration: inherit;
  64.   text-transform: inherit; 
  65. }
  67. .mdc-typography--headline6 {
  68.   font-family: Roboto, sans-serif;
  69.   -moz-osx-font-smoothing: grayscale;
  70.   -webkit-font-smoothing: antialiased;
  71.   font-size: 1.25rem;
  72.   line-height: 2rem;
  73.   font-weight: 500;
  74.   letter-spacing: 0.0125em;
  75.   text-decoration: inherit;
  76.   text-transform: inherit; 
  77. }
  79. .mdc-typography--subtitle1 {
  80.   font-family: Roboto, sans-serif;
  81.   -moz-osx-font-smoothing: grayscale;
  82.   -webkit-font-smoothing: antialiased;
  83.   font-size: 1rem;
  84.   line-height: 1.75rem;
  85.   font-weight: 400;
  86.   letter-spacing: 0.00937em;
  87.   text-decoration: inherit;
  88.   text-transform: inherit; 
  89. }
  91. .mdc-typography--subtitle2 {
  92.   font-family: Roboto, sans-serif;
  93.   -moz-osx-font-smoothing: grayscale;
  94.   -webkit-font-smoothing: antialiased;
  95.   font-size: 0.875rem;
  96.   line-height: 1.375rem;
  97.   font-weight: 500;
  98.   letter-spacing: 0.00714em;
  99.   text-decoration: inherit;
  100.   text-transform: inherit; 
  101. }
  103. .mdc-typography--body1 {
  104.   font-family: Roboto, sans-serif;
  105.   -moz-osx-font-smoothing: grayscale;
  106.   -webkit-font-smoothing: antialiased;
  107.   font-size: 1rem;
  108.   line-height: 1.5rem;
  109.   font-weight: 400;
  110.   letter-spacing: 0.03125em;
  111.   text-decoration: inherit;
  112.   text-transform: inherit; 
  113. }
  115. .mdc-typography--body2 {
  116.   font-family: Roboto, sans-serif;
  117.   -moz-osx-font-smoothing: grayscale;
  118.   -webkit-font-smoothing: antialiased;
  119.   font-size: 0.875rem;
  120.   line-height: 1.25rem;
  121.   font-weight: 400;
  122.   letter-spacing: 0.01786em;
  123.   text-decoration: inherit;
  124.   text-transform: inherit; 
  125. }
  127. .mdc-typography--caption {
  128.   font-family: Roboto, sans-serif;
  129.   -moz-osx-font-smoothing: grayscale;
  130.   -webkit-font-smoothing: antialiased;
  131.   font-size: 0.75rem;
  132.   line-height: 1.25rem;
  133.   font-weight: 400;
  134.   letter-spacing: 0.03333em;
  135.   text-decoration: inherit;
  136.   text-transform: inherit; 
  137. }
  139. .mdc-typography--button {
  140.   font-family: Roboto, sans-serif;
  141.   -moz-osx-font-smoothing: grayscale;
  142.   -webkit-font-smoothing: antialiased;
  143.   font-size: 0.875rem;
  144.   line-height: 2.25rem;
  145.   font-weight: 500;
  146.   letter-spacing: 0.08929em;
  147.   text-decoration: none;
  148.   text-transform: uppercase; 
  149. }
  151. .mdc-typography--overline {
  152.   font-family: Roboto, sans-serif;
  153.   -moz-osx-font-smoothing: grayscale;
  154.   -webkit-font-smoothing: antialiased;
  155.   font-size: 0.75rem;
  156.   line-height: 2rem;
  157.   font-weight: 500;
  158.   letter-spacing: 0.16667em;
  159.   text-decoration: none;
  160.   text-transform: uppercase; 
  161. }