Firefox의 'Bolder` 기본값은 가변 글꼴의 문제입니다

가변 글꼴은 단일 파일에서 다양한 글꼴 스타일의 생성을 단순화합니다. 그러나 현재 브라우저 렌더링<strong></strong> 그리고<b></b> 요소는 가변 글꼴로 제공되는 광범위한 글꼴 중량 값과 호환성 문제를 제시합니다.

기본 글꼴 중량의 브라우저 불일치

<strong></strong> 그리고<b></b> 요소는 텍스트를 강조합니다. 브라우저는 글꼴 체중을 증가시켜이를 달성합니다. 이것은 일반적으로 잘 작동합니다. 예를 들어, MDN 웹 문서는 사용합니다<strong></strong> "문제를 찾았습니까?" 부분.

이 문제는 사용자 정의 글꼴 체중으로 발생합니다. 기본값은 400이지만 font-weight 1에서 1000까지 값을 허용합니다. Chrome 및 Firefox Render<strong></strong> 주변 텍스트의 글꼴 중량을 기반으로합니다.

Chrome과 Safari는 700의 글꼴 체중을 지속적으로 사용하는 반면 Firefox는 컨텍스트에 따라 400, 700 또는 900을 사용합니다.

불일치의 근원

Chrome 및 Firefox는 사용자 에이전트 스타일 시트에 다른 font-weight 값을 사용합니다.

 <code>/* Chrome and Safari */ strong, b { font-weight: bold; } /* Firefox */ strong, b { font-weight: bolder; }</code>

bold 700과 동일하지만 bolder 상대적입니다. 그러나 HTML 표준은 현재 Firefox가 뒤 따르는 권장 사항 인 bolder (2012 년 이후)를 권장합니다. 인기있는 정상화 스타일 시트는 이러한 불일치를 다룹니다.

기본값 평가

Firefox의 기본값은 표준과 일치합니다. 그러나 그것은 우월합니까? 두 기본값 모두 결함이 있습니다. Chrome의 bold 더 높은 글꼴 무게 (약 700)에서 실패하는 반면, Firefox의 bolder 투쟁은 무게가 낮습니다 (약 300).

Firefox의 최악의 시나리오에서<strong></strong> 텍스트는 거의 보이지 않습니다. 아래 이미지는 Firefox에서 349의 글꼴 체중이있는 텍스트를 보여줍니다. 내면의 단어를 발견 할 수 있습니까?<strong></strong> 태그? Firefox는 400으로 51 포인트 증가한 400으로이를 렌더링합니다.

결론

350 글꼴 체중 이하의 얇거나 가변 글꼴을 사용하는 경우<strong></strong> 그리고<b></b> Firefox에서는 불분명 할 수 있습니다. 이러한 요소에 대한 font-weight 수동으로 설정하는 것은 브라우저의 차선 기본값에 의존하지 않는 것이 좋습니다.

 <code>/* Example: Defining regular and bold font-weights */ body { font-weight: 340; } b, strong { font-weight: 620; }</code>

bolder 가변 글꼴에 문제가 있습니다. 이상적으로 강조 된 텍스트는 주변 텍스트의 무게에 관계없이 쉽게 볼 수 있어야합니다. 일관된 글꼴 가중 증가 (예 : 백분율)가 바람직합니다. CSS 실무 그룹은 Lea Verou가 제안한대로 백분율 기반 font-weight 값에 대해 논의하고 있습니다.

 <code>/* Proposed percentage-based font-weight */ strong, b { font-weight: 150%; }</code>

가변 글꼴에 대한 현재 bold / bolder 접근 방식보다 150% 증가가 더 나을 수 있습니다.

위 내용은 Firefox의 'Bolder` 기본값은 가변 글꼴의 문제입니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!