2

そのため、Firefox のバージョン 57.0.1 を使用している Google Fonts の Nunito フォントで問題が発生しています。フォントをロードする方法は次のとおりです。

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/6TbRXKWJjpj6V2v_WyRbMevvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

下線を引くと、バーがテキストの中央に表示され、コンテンツが垂直方向に正しく配置されません。

これは、正しくレンダリングされていない h3 要素を選択したときの Firefox デバッガーのコンテンツです。

h3 {
    font-size: 2.92rem;
    margin: 1.46rem 0;
    font-weight: 700;
    line-height: 110%;
    vertical-align: middle;
    font-family: "Nunito", sans-serif;
    text-decoration: underline;
}

垂直方向の配置と行の高さを変更しても、問題は解決しません。デバッガーからフォント ファミリを無効にすると、問題は解決します。フォントは他のブラウザで完全にレンダリングされます。

4

1 に答える 1

2

私もこれを見たことがあります。インライン スパン要素の垂直方向の配置の継承にも問題があるようです。

「Nunito Sans」に切り替えて問題を解決しました

于 2018-01-02T12:37:19.273 に答える