4가지 데모에서 설명하는 CSS From Font 가치

반응형

img

UI Components의 Advention을 하던 중 텍스트 장식 두께 CSS 속성의 From font 값을 우연히 발견했습니다. 그게 궁금해서 조금 조사를 해봤는데 제가 발견한 것(배운 것)이 재미있기도 하고 공유할 가치가 있다고 생각합니다.

From-font 값 정보

MDN이 from-font 값을 정의하는 방법은 다음과 같습니다.

따라서 From-font 값은 글꼴 파일에 선의 두께에 대한 정의가 있는 경우에만 사용됩니다. 그렇지 않으면 브라우저는 두께를 선택하라는 자동 값을 사용합니다. 어떻게 작동하는지 알고 싶어서 다른 값과 비교해서 몇 가지 데모를 만들었습니다.

 

데모 1: 텍스트 장식 두께: 자동

첫 번째 데모에서는 두께에 대한 자동 값이 기본 글꼴 패밀리에 대한 밑줄, 겹침 및 취소선과 함께 어떻게 작동하는지 보고 싶었습니다.

취소선 텍스트에 잘 맞지 않는 조합이 있다는 것 외에는 특별히 흥미로운 점을 발견하지 못했습니다. 예를 들어, 웨이브 장식을 취소선과 함께 사용하면 읽을 수 없지만, 일부 시나리오에서는 원하는 출력일 수 있습니다.

데모 2: 텍스트 장식 두께: 0px

두 번째 데모에서는 텍스트가 가는 선으로 어떻게 작동하는지 보고 싶었습니다.

 

행은 문단 또는 더 작은 텍스트에서 작동하지만, 취소선이 있는 얇은 줄은 찾기 어렵기 때문에 큰 텍스트에서는 잘 작동하지 않습니다.

라인 두께는 1px 이하로 설정할 수 없다는 것도 배웠습니다. 데모에서 라인 두께는 0px로 설정되지만 브라우저는 1px 라인을 렌더링합니다.

데모 3: 텍스트 장식 두께: 글꼴 및 글꼴 가중치

다음으로 텍스트 장식 두께: from-font 선언이 글꼴 무게에 따라 변경되는지 확인하고 싶었습니다. 왼쪽에서는 값이 from-font로 설정되고 오른쪽에서는 값이 auto로 설정됩니다.

 

From-font 값은 적어도 Roboto가 글꼴 패밀리일 때는 텍스트의 글꼴 무게 변화를 따르지 않는 것으로 보인다. 텍스트의 굵기와 굵기는 차이가 없습니다. 값이 from-font로 설정된 경우 선 두께는 동일합니다.

파이어폭스는 두 값에 대해 선 두께를 동일하게 렌더링하므로, 제 추측에 따르면 파이어폭스는 실제로 from-font 값을 자동 값으로 사용합니다.

데모 4: 텍스트 장식 두께: from-font 및 font-family

이 마지막 데모에서는 From-font 값이 다양한 글꼴 패밀리에서 어떻게 작동하는지 보고 싶었습니다. 그것은 가장 작은 값인 1px를 렌더링하기 때문에 문단이나 더 작은 글꼴 크기에 영향을 미치지 않습니다. 기본

요소와 같이 글꼴 크기가 클수록 차이가 나타나지만 매우 자세히 볼 경우에만 차이가 나타납니다. 또한 큰 텍스트에서 취소선이 다시 한 번 너무 얇습니다. 이는 글꼴 디자이너와 개발자가 글꼴을 디자인하고 정의할 때 고려할 수 있는 사항입니다.

브라우저 지원

 

대부분의 최신 브라우저가 이 속성을 지원하기 때문에 오늘날 텍스트 장식 두께 속성을 사용할 수 있습니다.

그래서, 그것을 사용해야 하나요?

비록 From Font 값이 좋은 생각처럼 보일지 모르지만, 나는 아직 그것을 사용해서는 안 된다고 생각합니다. 브라우저 전체에 걸쳐 기본 텍스트 장식 두께 값과의 불일치가 너무 많으므로(Shime Vidas가 매우 깊이 있게 다루었다), From-font 값이 여전히 잘 작동하지 않는 것은 놀랄 일이 아니다. 글꼴 크기에 따라 변하도록 백분율이나 다른 상대적인 단위로 정의해야 할 수도 있습니다. 아마도 폰트 디자이너들은 그것이 그렇게 되지 않아야 한다고 느낄 것이다. 어느 쪽이든 속성 값의 기본 동작과 렌더링 방법에 대해 더 많은 논의가 필요한 것 같습니다.

나는 기사의 링크 밑줄을 위해 내 개인 사이트의 From Font 값을 사용하고 있는데, 잘 작동하는 것 같아. 선이 미묘하지만, 여전히 상호작용을 합니다.

 

앞으로 텍스트 장식 두께에 대한 더 많은 선택지가 나오길 기대합니다.