CSS 밑줄은 크롬이 너무 얇고 너무 낮습니다.

CSS의 밑줄 표시에 대한 자세한 설명 및 수리 제안 Chrome 브라우저 표시

이 기사에서는 크롬에서 새로운 CSS 속성 text-decoration-thickness 와 text-underline-offset 테스트 할 때 발생하는 두 가지 문제에 대해 논의합니다.

목차

• 기본 밑줄은 일관성이 없습니다
• 브라우저 기본 스타일을 대체하십시오
• Chrome Bug 1 : MacOS 시스템에서 밑줄이 너무 얇습니다.
• 크롬 버그 2 : 밑줄이 너무 낮습니다
• 크롬 브라우저 버그를 먼저 해결하는 방법

기본 밑줄은 일관성이 없습니다

간단한 웹 페이지에 텍스트 링크를 추가하고 글꼴을 Arial으로 설정 한 다음 다른 브라우저와 운영 체제에서 밑줄이있는 디스플레이 효과를 비교하십시오. 결과는 다른 브라우저의 기본 밑줄 두께 및 수직 위치 (기준선 오프셋)가 일치하지 않음을 보여줍니다. 이는 다음 기본 동작 (자동 값)을 지정하는 CSS 텍스트 장식 모듈의 조항을 준수합니다.

사용자 에이전트는 적절한 텍스트 장식 라인 두께를 선택합니다. [...] 사용자 에이전트는 적절한 밑줄 오프셋을 선택합니다.

브라우저 기본 스타일을 대체하십시오

두 개의 새로운 CSS 속성은 밑줄의 두께와 오프셋을 정확하게 정의 할 수 있습니다.

• text-decoration-thickness
• text-underline-offset

이 두 특성을 사용하면 Firefox (Gecko Engine) 및 Safari (Webkit Engine)와 같은 다른 브라우저에서도 일관된 밑줄 효과를 만들 수 있습니다.

 H1 {
  텍스트 결정 : 밑줄;
  텍스트 결정 두께 : 0.04EM;
  텍스트 언더 라인 오프셋 : 0.03em;
}

참고 : text-decoration-thickness 속성은 또한 배송기에서 선호하는 밑줄 너비를 사용하도록 지시하는 특별한 from-font 값을 가지고 있습니다 (사용 가능한 경우). 테스트 후, 다른 글꼴의 밑줄 효과는 여전히 일치하지 않습니다.

Chrome Bug 1 : MacOS 시스템에서 밑줄이 너무 얇습니다.

text-decoration-thickness 속성이 integer 비 픽셀 값으로 계산되는 글꼴 관련 길이 값으로 설정되면 Chrome은 반올림 대신 반올림됩니다. 예를 들어, 선언 된 중량이 0.06em 이고 계산이 1.92px 인 경우 Chrome은 2px 대신 1px 중량의 밑줄을 그립니다. 이 문제는 MACOS 시스템으로만 제한됩니다.

 A {
  글꼴 크기 : 2EM; 계산 결과는 32px * /입니다.
  텍스트 결정-두께 : 0.06EM; / * 계산 결과는 1.92px * /입니다.
}

스크린 샷은 Chrome (세 번째 줄)의 텍스트 장식 라인이 Safari 및 Firefox 브라우저보다 두 배나 얇다는 것을 보여줍니다.

자세한 내용은 Chromium Issue #1255280을 참조하십시오.

크롬 버그 2 : 밑줄이 너무 낮습니다

text-underline-offset 속성은 문자 기준선과 밑줄 사이의 거리를 정확하게 설정할 수 있습니다 (기준선에 대한 밑줄의 오프셋). 불행히도, Chrome 브라우저는 현재이를 올바르게 구현하지 않아 밑줄 위치가 너무 낮습니다.

 H1 {
  텍스트 결정 : 밑줄;
  텍스트-디코레이션 컬러 : #f707;

  / * "스킵 잉크" */비활성화
  -webkit-text-decoration-skip : none;
  Text-Decoration-Skip-ink : 없음;

  /* 전체 침몰 선*/
  텍스트-지분 두께 : 0.175EM; /* 싱킹 라인 높이* /
  텍스트 언더 라인 오프셋 : 0; 오프셋없는 기준선* /
}

이 버그로 인해 밑줄을 기준선으로 완전히 이동할 수 없습니다.

자세한 내용은 Chromium Issue #1172623을 참조하십시오.

참고 : 위의 이미지에서 볼 수 있듯이 Safari는 하단 대신 가라 앉는 선의 상단에 밑줄을 긋습니다. 이것은 최근에 수정 된 웹 키 버그입니다. 이 수정 사항은 다음 버전의 Safari에 포함되어야합니다.

크롬 브라우저 버그를 먼저 해결하는 방법

스타일의 밑줄에 사용되는 두 가지 새로운 CSS 속성은 CSS에 추가 된 환영입니다. 이 두 관련 크롬 버그가 가능한 빨리 수정 될 수 있기를 바랍니다. 이러한 CSS 기능이 중요하다면 Chromium의 버그 추적기에 이러한 버그에 출연하여 우려 사항을 표현하십시오.

위 내용은 CSS 밑줄은 크롬이 너무 얇고 너무 낮습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!