Firefox 글꼴 렌더링이 왜 그렇게 굵게 표시되나요?

Question 1

간격이 조금씩 다르지만 안티앨리어싱과 엣지 컬러에 따른 착시 현상인 것 같습니다. 다음은 800%로 확대된 몇 가지 스니펫입니다.

Chrome과 Firefox의 굵은 글자:

Chrome 일반 텍스트:

Firefox 일반 텍스트:

문자의 어두운 모양은 인접한 여러 픽셀의 "평균" 또는 집합적 어두움에 의해 생성됩니다. 경우에 따라 한 브라우저는 두 개의 어두운 색상 픽셀로 일반 문자의 수직 막대를 렌더링하고 다른 브라우저는 두 개의 밝은 색상의 픽셀로 둘러싸인 중앙의 매우 어두운 픽셀을 사용하거나 두 개의 중간 어두운 색상을 나란히 사용합니다. -쪽은 밝은 색상 옆에 매우 어두운 색상을 사용하고 다른 쪽은 매우 어두운 색상을 사용합니다. 좋은 예: t(첫 번째 줄의 첫 번째 문자) 및 pl(두 번째 줄의 두 번째 및 세 번째 문자)

왼쪽의 더 어두운 앤티앨리어싱 색상은 eChrome 렌더링을 Firefox 버전보다 더 넓게 보이게 합니다. Firefox에서는 수직 막대가 더 굵게 보이고 Chrome에서는 d수직 막대가 더 굵게 보입니다.b

더 구체적으로 알아보려면 m일반 텍스트의 두 번째 행에 있는 첫 글자인 소문자를 비교하세요. 해당 문자의 경우 Firefox는 수직선을 볼 때 더 굵게 나타납니다. 왜?

두 브라우저 모두 수직선을 3개의 픽셀 열로 렌더링하므로 선의 너비는 실제로 동일합니다. 그러나 구성 요소 색상으로 인해 Firefox 수직이 더 넓게 보입니다. 매우 밝은 색상은 어두운 색상보다 겉보기 너비에 영향을 덜 미칩니다. 중간에서 어두운 색상(명도 값은 최대 50%를 넘지 않음)이 가장 큰 효과를 냅니다. 각 수직 막대의 색상을 샘플링하고 HSL 색상 공간을 사용하여 밝기 값으로 변환했습니다.

첫 번째 다리에는 둘 다 매우 어두운 중앙 막대가 있고 그 옆에는 경계선이 있는 어두운 막대가 있습니다. Firefox 막대는 조금 더 어둡습니다.

가운데 다리의 경우 Chrome에는 어두운 막대가 하나만 있으며 매우 어둡습니다(검은색). Firefox에는 하나의 어두운 막대와 하나의 중간 어두운 막대가 있으며 둘 다 Chrome의 검은색 막대보다 "훨씬" 더 밝습니다. 하지만 둘 다 어둡게 인식될 만큼 어둡기 때문에 Firefox 다리가 더 넓어 보입니다.

오른쪽 다리의 경우 Chrome에는 하나의 어두운 막대가 있고 Firefox에는 두 개의 중간 어두운 막대가 있습니다. 각각은 Chrome의 어두운 막대보다 훨씬 가볍지만 어둡게 인식될 만큼 어둡기 때문에 Firefox에서는 다리가 더 넓어 보입니다.

흰색 배경에 어두운 글자이기 때문에 밝음보다는 어두움이라는 개념으로 생각하기가 더 쉽기 때문에 아래 표는 보색값을 보여줍니다(밝은 색상도 일반 크기로 볼 때 어느 정도 어두움을 나타냄).

문자를 보통 크기로 볼 때 문자 윤곽선의 "어두운" 양과 어느 정도 선의 겉보기 너비가 다소 대담한 느낌을 주는 것입니다. 위 차트는 글자의 모든 다리에 대한 농도 값을 통합한 것입니다 m. Firefox는 mChrome보다 15% 더 어둡습니다 m. 이전에 설명했듯이 겉보기 선 두께는 Firefox에서 더 넓지만 일반 크기와 보기 속도에서는 감지할 수 없습니다.

따라서 Firefox는 mChrome보다 더 대담하게 보입니다. 하지만 이는 캐릭터마다 다르므로 주의하세요. 첫 번째 문자 t, 세 번째 문자, b, f"for"의 the, 두 번째 줄의 the 앞은 p같은 이유로 Chrome에서 더 굵게 보이는 문자 중 하나입니다.th

일부 문자의 경우 세로 문자 중 하나가 한 브라우저에서 더 굵게 표시되고, 같은 문자의 다른 세로 문자가 다른 브라우저에서 더 굵게 표시됩니다. 예를 들어, 두 번째 줄의 "without"에는 hand가 있습니다 .u

Answer