OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
7 Code distributed by Google as part of the polymer project is also | |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
9 --> | |
10 <!-- TODO(nevir): Should we upgrade Polymer/font-roboto to the final font? --> | |
11 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,300,30
0italic,400italic,500,500italic,700,700italic"> | |
12 <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Inconsolata:400,7
00"> | |
13 | |
14 <!-- | |
15 Typographic styles are provided matching the Material Design standard styles: | |
16 http://www.google.com/design/spec/style/typography.html#typography-standard-styl
es | |
17 | |
18 To make use of them, apply a `paper-font-<style>` class to elements, matching | |
19 the font style you wish it to inherit. | |
20 | |
21 <header class="paper-font-display2">Hey there!</header> | |
22 | |
23 Note that these are English/Latin centric styles. You may need to further adjust | |
24 line heights and weights for CJK typesetting. See the notes in the Material | |
25 Design typography section. | |
26 --> | |
27 <style> | |
28 | |
29 .paper-font-display4, | |
30 .paper-font-display3, | |
31 .paper-font-display2, | |
32 .paper-font-display1, | |
33 .paper-font-headline, | |
34 .paper-font-title, | |
35 .paper-font-subhead, | |
36 .paper-font-body2, | |
37 .paper-font-body1, | |
38 .paper-font-caption, | |
39 .paper-font-menu, | |
40 .paper-font-button { | |
41 font-family: 'Roboto', 'Noto', sans-serif; | |
42 -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */ | |
43 } | |
44 | |
45 .paper-font-code2, | |
46 .paper-font-code1 { | |
47 font-family: 'Inconsolata', 'Consolas', 'Source Code Pro', 'Monaco', 'Menlo',
monospace; | |
48 -webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */ | |
49 } | |
50 | |
51 /* Opt for better kerning for headers & other short labels. */ | |
52 .paper-font-display4, | |
53 .paper-font-display3, | |
54 .paper-font-display2, | |
55 .paper-font-display1, | |
56 .paper-font-headline, | |
57 .paper-font-title, | |
58 .paper-font-subhead, | |
59 .paper-font-menu, | |
60 .paper-font-button { | |
61 text-rendering: optimizeLegibility; | |
62 } | |
63 | |
64 /* | |
65 "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display | |
66 styles. All other styles should exist as single lines." | |
67 */ | |
68 .paper-font-display4, | |
69 .paper-font-display3, | |
70 .paper-font-title, | |
71 .paper-font-caption, | |
72 .paper-font-menu, | |
73 .paper-font-button { | |
74 white-space: nowrap; | |
75 overflow: hidden; | |
76 text-overflow: ellipsis; | |
77 } | |
78 | |
79 .paper-font-display4 { | |
80 font-size: 112px; | |
81 font-weight: 300; | |
82 letter-spacing: -.044em; | |
83 line-height: 120px; | |
84 } | |
85 | |
86 .paper-font-display3 { | |
87 font-size: 56px; | |
88 font-weight: 400; | |
89 letter-spacing: -.026em; | |
90 line-height: 60px; | |
91 } | |
92 | |
93 .paper-font-display2 { | |
94 font-size: 45px; | |
95 font-weight: 400; | |
96 letter-spacing: -.018em; | |
97 line-height: 48px; | |
98 } | |
99 | |
100 .paper-font-display1 { | |
101 font-size: 34px; | |
102 font-weight: 400; | |
103 letter-spacing: -.01em; | |
104 line-height: 40px; | |
105 } | |
106 | |
107 .paper-font-headline { | |
108 font-size: 24px; | |
109 font-weight: 400; | |
110 letter-spacing: -.012em; | |
111 line-height: 32px; | |
112 } | |
113 | |
114 .paper-font-title { | |
115 font-size: 20px; | |
116 font-weight: 500; | |
117 line-height: 28px; | |
118 } | |
119 | |
120 .paper-font-subhead { | |
121 font-size: 16px; | |
122 font-weight: 400; | |
123 line-height: 24px; | |
124 } | |
125 | |
126 .paper-font-body2 { | |
127 font-size: 14px; | |
128 font-weight: 500; | |
129 line-height: 24px; | |
130 } | |
131 | |
132 .paper-font-body1 { | |
133 font-size: 14px; | |
134 font-weight: 400; | |
135 line-height: 20px; | |
136 } | |
137 | |
138 .paper-font-caption { | |
139 font-size: 12px; | |
140 font-weight: 400; | |
141 letter-spacing: 0.011em; | |
142 line-height: 20px; | |
143 } | |
144 | |
145 .paper-font-menu { | |
146 font-size: 13px; | |
147 font-weight: 500; | |
148 line-height: 24px; | |
149 } | |
150 | |
151 .paper-font-button { | |
152 font-size: 14px; | |
153 font-weight: 500; | |
154 letter-spacing: 0.018em; | |
155 line-height: 24px; | |
156 text-transform: uppercase; | |
157 } | |
158 | |
159 .paper-font-code2 { | |
160 font-size: 14px; | |
161 font-weight: 700; | |
162 line-height: 20px; | |
163 } | |
164 | |
165 .paper-font-code1 { | |
166 font-size: 14px; | |
167 font-weight: 700; | |
168 line-height: 20px; | |
169 } | |
170 | |
171 </style> | |
OLD | NEW |