CSS에서 글꼴 광학 크기 조정 속성을 사용하는 방법은 무엇입니까?

Font-Optical-Sizing 속성을 사용하는 방법을 배우기 전에 먼저 CSS의 글꼴 속성과 Font-Optical-Sizing이 별도의 속성으로 필요한 이유를 살펴봐야 합니다.

웹페이지의 텍스트 스타일은 CSS의 글꼴 속성에 의해 제어됩니다. 이는 다른 많은 속성의 약어입니다. 요소에 시스템 글꼴을 적용하거나 다른 CSS 속성에 다른 값을 설정하는 데 사용할 수 있습니다.

글꼴 속성

이 속성은 모든 요소에 적용되며 본질적으로 상속 가능합니다. 즉, 달리 지정하지 않는 한 하위 요소의 글꼴은 상위 요소의 글꼴과 동일합니다.

글꼴 단축 속성을 구성하는 속성은 다음과 같습니다 -

• Font-family - 텍스트에 적용될 글꼴 계열을 지정하며 선택적으로 왼쪽에서 오른쪽으로 우선순위가 있는 계열 목록을 제공할 수 있습니다.

• 글꼴 크기 - 글꼴이나 텍스트의 크기를 제어하는 ​​데 사용됩니다.

• Font Stretch − 이 속성을 사용하여 일반 문자보다 더 좁거나 더 넓은 문자 얼굴을 설정할 수 있습니다.

• Font style − 이 속성은 글꼴을 굵게, 기울임꼴, 밑줄 또는 취소선 텍스트로 표시할지 여부를 지정합니다

• Font-variant - 글꼴 변형을 제어하고 합자에 대해 다양한 값을 설정합니다.

• Font-weight - 이 속성은 텍스트가 얼마나 굵게 표시되는지를 설정합니다.

• Line Height- 텍스트 줄 사이의 거리를 설정하는 데 사용됩니다.

글꼴 속기 속성의 일부로 사용되든 개별적으로 사용되든 이러한 모든 속성에는 초기 값이 있습니다. 대부분의 경우 초기 값은 "Normal"이고 글꼴 크기의 기본값은 "Medium"이며 글꼴 모음의 기본값은 사용자 시스템에 따라 다릅니다.

예

글꼴 속성을 사용하여 텍스트 스타일을 지정하는 예는 다음과 같습니다.

으아악

글꼴 광학 크기란 무엇인가요?

CSS에는 생성된 텍스트가 다양한 화면 크기에 최적화되어 있는지 여부를 결정하는 font-optical-sizing 속성이 있습니다. 브라우저는 글꼴 글리프의 윤곽선을 변경하여 다양한 크기에서 더 읽기 쉽게 만들 수 있습니다.

글꼴이 광학적 크기 조정을 지원한다면 우리에게는 큰 이점이 될 것입니다. 이런 방식으로 우리는 텍스트가 항상 사용자가 사용하는 화면에 맞춰지도록 보장합니다. 대부분의 가변 글꼴군은 이 속성을 지원합니다. 글꼴에 광학 크기 조정 축이 있으면 광학 크기 조정이 자동으로 활성화됩니다. 광학 크기 변경 축을 나타내기 위해 글꼴 변형 설정의 opsz 값을 사용합니다.

광학 크기 조정을 사용하는 경우 일반적으로 더 작은 글꼴 크기는 더 두꺼운 획과 더 큰 세리프와 함께 표시되는 반면, 큰 텍스트는 일반적으로 더 두꺼운 획과 더 얇은 획 사이의 대비가 커져 더 세련되게 나타납니다.

이 속성을 지정할 때 다음 값을 사용할 수 있습니다 -

• None − 광학적으로 수정된 텍스트가 필요하지 않을 때 이 값을 사용합니다.

• Auto - 브라우저는 화면 크기에 따라 문자 모양을 조정해야 할 때 이 값을 사용합니다.

또한 이 속성의 값으로 전역 값(상속, 초기 및 설정 해제)을 사용할 수도 있습니다.

기본적으로 이 속성의 초기 값은 auto입니다. 이는 모든 요소에 적용되며 ::first-letter 및 ::first-line 속성도 포함합니다. 상속 가능한 값이며 브라우저에서 지정한 값이 계산된 값으로 사용됩니다. 개별 애니메이션 유형이 있습니다.

예

이 속성의 값으로 auto 값을 사용하는 예는 다음과 같습니다.

으아악

예

이 예에서는 CSS에서 사용할 수 있는 세 가지 전역 속성 중 하나인 속성 값으로 상속을 사용합니다.

으아악

결론

요약하자면, CSS의 글꼴 광학 크기 조정 속성은 다양한 장치와 해상도에서 텍스트를 더 보기 좋게 만드는 좋은 방법입니다. 사용 목적에 따라 글꼴 크기를 조정할 수 있으므로 가독성이 향상되고 다양한 화면에서 보다 일관된 디자인을 만드는 데 도움이 됩니다. 이 기능을 활용하면 디자이너는 각 화면 크기에 대한 설정을 수동으로 조정할 필요 없이 어떤 장치에서 보든 레이아웃이 멋지게 보이도록 할 수 있습니다.

위 내용은 CSS에서 글꼴 광학 크기 조정 속성을 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!