CSS：クロムの文字がピクセルズームで異なる色で囲まれているのはなぜですか？

Question

私はh1ヘッダーを持つブートストラップジャンクトロンを持っています。 H1ヘッダと

画像：

：H2ヘッダと

画像IがH1ヘッダがH2にすることを変更したとき、私は文字色であった変化を囲まれていることを把握します

image1 htmlコード：

<div class="container"> 
    <div class="jumbotron"> 
    <h1>Admin Template</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p> 
    </div> 
</div> 

Image1のCSSコード：

@media screen and (min-width: 768px) 
.jumbotron h1, .jumbotron .h1 { 
    font-size: 63px; 
} 
.jumbotron h1, .jumbotron .h1 { 
    color: inherit; 
} 
h1, .h1 { 
    font-size: 36px; 
} 
h1, .h1, h2, .h2, h3, .h3 { 
    margin-top: 20px; 
    margin-bottom: 10px; 
} 
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { 
    font-family: inherit; 
    font-weight: 300; 
    line-height: 1.1; 
    color: #fff; 
} 
h1 { 
    font-size: 2em; 
    margin: 0.67em 0; 
} 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
user agent stylesheet 
h1 { 
    display: block; 
    font-size: 2em; 
    -webkit-margin-before: 0.67em; 
    -webkit-margin-after: 0.67em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
    font-weight: bold; 
} 
Inherited from div.jumbotron 
.jumbotron { 
    padding-top: 30px; 
    padding-bottom: 30px; 
    margin-bottom: 30px; 
    color: inherit; 
    background-color: #252830; 
} 
Inherited from body 
body { 
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    line-height: 1.42857143; 
    color: #CFD2DA; 
    background-color: #252830; 
    font-weight: 300; 
} 
Inherited from html 
html { 
    font-size: 10px; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 
html { 
    font-family: sans-serif; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
} 
Pseudo ::before element 
*:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
Pseudo ::after element 
*:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

画像2のHTMLコード：

<div class="container"> 
    <div class="jumbotron"> 
    <h2>Admin Template</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do</p> 
    </div> 
</div> 

画像2 CSSコード：

h2, .h2 { 
    font-size: 30px; 
} 
h1, .h1, h2, .h2, h3, .h3 { 
    margin-top: 20px; 
    margin-bottom: 10px; 
} 
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { 
    font-family: inherit; 
    font-weight: 300; 
    line-height: 1.1; 
    color: #fff; 
} 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
user agent stylesheet 
h2 { 
    display: block; 
    font-size: 1.5em; 
    -webkit-margin-before: 0.83em; 
    -webkit-margin-after: 0.83em; 
    -webkit-margin-start: 0px; 
    -webkit-margin-end: 0px; 
    font-weight: bold; 
} 
Inherited from div.jumbotron 
.jumbotron { 
    padding-top: 30px; 
    padding-bottom: 30px; 
    margin-bottom: 30px; 
    color: inherit; 
    background-color: #252830; 
} 
Inherited from body 
body { 
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 14px; 
    line-height: 1.42857143; 
    color: #CFD2DA; 
    background-color: #252830; 
    font-weight: 300; 
} 
Inherited from html 
html { 
    font-size: 10px; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
} 
html { 
    font-family: sans-serif; 
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
} 
Pseudo ::before element 
*:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
Pseudo ::after element 
*:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

この動作への説明がありますか？ テキストを常に灰色で囲むことはできますか？

Answer 1

これをテキストプロパティに追加してみてください。

-webkit-font-smoothing: antialiased; 

ありがとうございます。