> 웹 프론트엔드 > CSS 튜토리얼 > CSS 글꼴 속기 표기법에서 슬래시(/)는 무엇을 의미합니까?

CSS 글꼴 속기 표기법에서 슬래시(/)는 무엇을 의미합니까?

Barbara Streisand
풀어 주다: 2024-12-10 20:49:13
원래의
862명이 탐색했습니다.

What Does the Forward Slash (/) Mean in CSS Font Shorthand Notation?

글꼴 속기 기호 해독: 슬래시의 의미

CSS 영역에서 수수께끼 같은 글꼴 속기 표기법은 종종 의문을 제기합니다. . 이러한 난제 중 하나는 슬래시(/)의 역할과 관련이 있습니다. 이 기사에서는 이 수수께끼 같은 구분 기호 뒤에 숨은 의미를 자세히 알아볼 것입니다.

슬래시 기능 이해

다음 CSS 선언을 고려하세요.

font: 12px/18px ...
로그인 후 복사

이 줄에서 12px/18px 부분은 중요한 의미를 갖습니다. 타이포그래피의 다음 두 가지 측면을 설명합니다.

  • 글꼴 크기(12px): 이 값은 텍스트를 렌더링하는 데 사용되는 글꼴의 크기를 나타냅니다.
  • 줄 높이(18px): 이 값은 텍스트 줄 사이의 세로 간격을 지정하여 가독성을 보장하고 미학.

이론을 구문에 결합

글꼴 속기의 흥미로운 구문은 인쇄상의 규칙에 경의를 표합니다. 인쇄 디자인에서 활자의 크기는 포인트로 표시되는 반면, 줄 높이는 일반적으로 활자 크기의 배수로 표시됩니다. 예를 들어, 줄 높이가 18px이면 텍스트가 12px 글꼴 크기와 50%의 추가 세로 간격(18px = 12px 12px의 50%)을 사용하여 렌더링된다는 의미입니다.

약칭을 개별 속성으로 변환

실제로 글꼴 속기 선언은 더 길고 자세한 내용으로 원활하게 변환됩니다. 등가:

font-size: 12px;
line-height: 18px;
로그인 후 복사

이는 단축 표기법이 여러 글꼴 속성을 동시에 정의하는 간단한 방법을 제공할 뿐임을 보여줍니다.

상대 줄 높이

선 높이는 백분율이나 em 단위와 같은 상대 값으로 표현될 수도 있다는 점에 유의하는 것이 중요합니다. 이러한 시나리오에서는 글꼴 크기를 기준으로 계산이 수행됩니다. 예를 들어 줄 높이가 150%라는 것은 줄 사이의 세로 간격이 글꼴 크기(18px = 12px * 150%)의 1.5배가 된다는 것을 의미합니다.

표준 참조

CSS의 글꼴 속성을 관리하는 사양에 대한 자세한 내용은 다음을 참조하세요. 다음:

  • [W3C CSS2.1 글꼴 속성 참조](https://www.w3.org/TR/CSS21/fonts.html)
  • [W3C CSS3 글꼴 모듈 글꼴 속성 참조](https://www.w3.org/TR/css3-fonts/#font-property)

위 내용은 CSS 글꼴 속기 표기법에서 슬래시(/)는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿