html - 不同标题显示相同的字体大小

Question

HTML:

<h1>The Repository For Your Photos.</h1>
<h2>The Repository For Your Photos.</h2>
<h3>The Repository For Your Photos.</h3>
<h4>The Repository For Your Photos.</h4>

CSS 重置:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}

结果:https://jsfiddle.net/h8wcL2cr/2/

为什么它们都一样？

Answer 1

因为您使用的是 CSS Reset 样式表，并且您将 font-size:100% 应用于从 h1 到 h6 的所有标题> 这会将 font-size 重置为浏览器默认值

因此，您必须重新设置标题的样式

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}  
h1 {font-size:150%}
h2 {font-size:80%}
h3 {font-size:65%}
h4 {font-size:45%}

<h1>The Repository For Your Photos.</h1>
<h2>The Repository For Your Photos.</h2>
<h3>The Repository For Your Photos.</h3>
<h4>The Repository For Your Photos.</h4>