FONT 가치의 CSS는 4 개의 데모에 설명되었습니다

text-decoration-thickness CSS 속성의 from-font 값을 탐색하십시오. 이 기사는 4 가지 데모 사례를 통해 이해하기 쉬운 방식 으로이 속성 값과 브라우저 호환성의 작동 원리를 설명합니다.

from-font 가치 세부 설명

MDN은 다음과 같이 from-font 값을 정의합니다.

이 값은 글꼴 파일에 선호되는 두께 정보가 포함 된 경우 사용됩니다. 글꼴 파일 에이 정보가 포함되어 있지 않으면 동작은 auto 값을 설정하는 것과 같습니다. 브라우저는 적절한 두께를 선택합니다.

따라서 from-font 값은 글꼴 파일이 선 두께를 정의 할 때만 적용됩니다. 그렇지 않으면 브라우저는 auto 값을 사용하고 브라우저는 두께를 자체적으로 선택합니다. 이 기사는 여러 데모 사례를 통해 다른 값과 비교합니다.

데모 1 : text-decoration-thickness: auto

첫 번째 데모 사례는 기본 글꼴 패밀리 하에서 밑줄, 오버 스코어 및 스트라이크에 대한 값에 대한 auto 값의 영향을 테스트합니다.

결과는 일부 조합 (예 : Strikethrough가 물결로 장식되어 있음)이 읽기 어려워 지지만 일부 시나리오에서는 원하는 출력 일 수 있습니다.

데모 2 : text-decoration-thickness: 0px

두 번째 데모 사례는 얇은 선의 성능을 테스트합니다.

얇은 선은 단락이나 작은 텍스트에서 잘 작동하지만 더 큰 텍스트에서는 얇은 획기적으로 식별하기가 어렵습니다.

또한 실험에 따르면 라인의 두께는 1px보다 작을 수 없습니다. 0px 로 설정 되더라도 브라우저는 여전히 1px 라인으로 렌더링됩니다.

데모 3 : text-decoration-thickness: from-font 및 글꼴 두께

세 번째 데모는 text-decoration-thickness: from-font 변합니다. 왼쪽은 from-font 에서 설정되고 오른쪽은 auto 으로 설정됩니다.

결과는 최소한 로봇 글꼴 패밀리를 사용할 때 텍스트 글꼴 두께에 따라 from-font 값이 변하지 않는 것으로 나타났습니다. 텍스트 크기 또는 두께의 변화는 선의 두께에 영향을 미치지 않습니다.

Firefox 브라우저는이 두 값의 라인 두께를 동일하게 렌더링한다는 점은 주목할 가치가 있습니다. 이는 Firefox 브라우저가 실제로 auto 값에서 from-font 값을 사용할 수 있음을 의미합니다.

데모 4 : text-decoration-thickness: from-font 및 글꼴 가족

마지막 시연 사례는 다른 글꼴 패밀리에서 from-font 가치가 어떻게 수행되는지 테스트합니다. 렌더링 최소값은 1px이므로 단락 또는 더 작은 글꼴 크기에 미치는 영향은 분명하지 않습니다. 더 큰 글꼴 크기 (예 : 기본값<p> 요소 하에서), 차이는 더 미묘하며 발견하려면 신중한 관찰이 필요합니다. 다시, 삭제 라인은 여전히 ​​더 큰 텍스트에서는 너무 얇습니다. 글꼴 디자이너와 개발자는 글꼴을 설계하고 정의 할 때이를 고려해야 할 수도 있습니다.</p> <h3> 브라우저 지원</h3> <p> 대부분의 현대식 브라우저는 <code>text-decoration-thickness 속성을 지원합니다.

from-font 값을 사용해야합니까?

from-font Value는 좋은 생각처럼 보이지만 아직 사용해야한다고 생각하지 않습니다. 다른 브라우저는 기본 text-decoration-thickness 값을 렌더링하는 데 많은 불일치가 있으므로 from-font 값의 현재 성능은 이상적이지 않습니다. 아마도 글꼴 크기로 변경되도록 백분율 또는 기타 상대 단위를 사용하여 from-font 값을 정의해야 할 것입니다. 또는 글꼴 디자이너는 그런 식으로 작동하지 않아야한다고 생각합니다. 어쨌든, 속성 값의 기본 동작과 그것이 어떻게 렌더링하는지를 결정하기 위해 더 많은 논의가 필요하다고 생각합니다.

나는 개인 웹 사이트의 기사 링크 밑줄에서 from-font Value를 사용했으며 그것이 잘 작동한다고 생각합니다. 라인은 미묘하지만 여전히 대화식 메시지를 전달합니다.

더 많은 옵션이 포함 된 미래의 text-decoration-thickness 속성을 기대합니다.

위 내용은 FONT 가치의 CSS는 4 개의 데모에 설명되었습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!