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'
  2. console.log(css)

输出:

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