CSS의 글꼴 가중치 속성 사용 예에 ​​대한 자세한 설명

사용자 에이전트가 글꼴 변형의 가중치를 결정하는 방법을 이해하려면 먼저 100~900이라는 키워드에 대해 이야기한 다음 이것이 어떻게 상속되는지 살펴보겠습니다.

허용되는 값 보통 | 굵게 | 400 | 700 | 900

즉, 글꼴의 굵기를 9단계로 나누는 것입니다. 예를 들어 OpenType은 9개 값 숫자 수준을 사용합니다. 글꼴이 이 수준을 갖게 되면 이러한 숫자는 각 수준에 직접 매핑됩니다. 예를 들어 100은 가장 가벼운 글꼴 왜곡에 매핑되고 900은 가장 무거운 글꼴 왜곡에 해당합니다.

사실 이 숫자에는 필수적인 글꼴 두께 규칙이 없습니다. CSS에서는 각 숫자에 해당하는 글꼴 두께가 그 앞의 숫자에 해당하는 글꼴 두께보다 작아서는 안 된다고 명시합니다.

이런 방식으로 100, 200, 300 및 400은 모두 동일한 두께의 글꼴 변형에 해당할 수 있고, 500 및 600은 더 두꺼운 글꼴 변형에 해당할 수 있으며, 700, 800 및 900은 더 두꺼운 글꼴 변형에 해당할 수 있습니다. .

이 숫자는 평범한 것으로 정의되며 700은 굵은 글씨에 해당합니다.

글꼴 변형 이름은 동일합니다. 400은 일반

과 동일합니다. 다른 숫자는

글꼴 가중치 속성 키워드에 해당하지 않지만 일반 글꼴 변형 이름에 해당할 수 있습니다. 글꼴 변형에 "Normal", "Regular", "Roman" 또는 "Book" 태그가 지정된 경우 400이 할당되고 "Medium" 태그가 지정된 글꼴 변형에는 500이 할당됩니다.

그러나 "Medium"으로 표시된 글꼴 변형이 사용 가능한 유일한 글꼴인 경우 500에 해당할 수 없습니다.

특정 글꼴 모음에 글꼴 두께가 9개 미만인 경우 사용자 에이전트는 더 많은 작업을 수행해야 합니다. 이 경우 미리 정의된 방식으로 공백을 채워야 합니다.

값 500이 할당되지 않은 경우 400과 동일한 글꼴 가중치가 부여됩니다.

300이 할당되지 않은 경우 400보다 약간 가벼운 글꼴 변형에 해당합니다. 더 밝은 글꼴을 사용할 수 없는 경우 300은 400과 같은 등급에 해당합니다. 이는 일반적으로 "보통" 및 "중간"의 경우입니다. 100과 200에도 같은 방법이 사용됩니다.

600을 할당하지 않으면 400보다 조금 더 무거운 글꼴 변형에 해당합니다. 해당 글꼴을 사용할 수 없는 경우 600은 500과 같은 특정 글꼴 변형에 해당합니다. 이 방법은 700, 800, 900에서도 사용됩니다.

이해를 돕기 위해 글꼴 가중치 할당의 세 가지

예를 살펴보겠습니다. 먼저 Karrank% 글꼴 계열이 OpenType 글꼴이고 해당 가중치 수준이 9개 정의되어 있다고 가정합니다.

여기서 이 숫자는 각 레벨에 해당하며 키워드 보통과 굵은 글씨는 각각 400과 700에 할당됩니다. 두 번째 예에서는 이 기사의 시작 부분에서 언급된 Zurich 글꼴 패밀리를 고려합니다. 해당 글꼴 변형에도 아래 가중치 값이 할당되어 있다고 가정합니다.

글꼴 형식: Zurich Light 할당 키워드: 공백 할당 번호: 100,200,300

글꼴 형식: Zurich 일반 할당 키워드: 일반 할당 번호: 400

글꼴 형식: Zurich Medium 할당 키워드: 공백 할당 번호: 500

글꼴 형식: Zurich Bold 할당 키워드: 굵은 글꼴 할당 번호: 600,700

글꼴 형식: Zurich Black 할당 키워드: 공백 할당 번호: 800

글꼴 형식: Zurich UltraBlack 할당 키 글꼴: Null 할당 번호: 900

처음 3개 숫자는 다음에 할당됩니다. 가장 밝은 글꼴. 일반 글꼴은 키워드 400 및 일반에 해당합니다.

중간 글꼴은 숫자 500에 할당됩니다. 600에 할당된 글꼴 변형이 없으므로 600과 700은 함께 동일한 글꼴 변형 굵은 글꼴에 해당합니다. 마지막으로 800과 900은 각각 Black과 UltraBlack 글꼴 변형에 할당됩니다.

이 상황은 상위 두 개의 두께 수준이 할당된 경우에만 발생합니다.

그렇지 않으면 사용자 에이전트는 이를 무시하고 800 및 900을 Bold 글꼴에 할당하거나 두 개의 Black 글꼴 변형 중 하나에 할당할 수 있습니다. 마지막으로 아래와 같이 TimesRegulal과 TimesBold라는 두 가지 글꼴 변형만 있는 Times 글꼴을 살펴보겠습니다.

글꼴 형식: TimesRegular 할당 키워드: 일반 할당 번호: 100,200,300,400,500

글꼴 형식: TimesBold 할당 키워드: 굵게 할당 번호: 600,700,800,900

키워드 일반 및 굵게의 분포는 직접 동일합니다. 이 숫자의 경우 100부터 300까지는 Regular 글꼴에 할당되어 있지만 500은 Medium 글꼴이 없으므로 Regular 글꼴에 할당되어 400과 같습니다.

나머지 중 700은 항상 굵은 글꼴에 할당되고, 800과 900은 더 굵은 글꼴이 없기 때문에 굵은 글꼴에 할당됩니다. 마지막으로 600이 다음

에 할당됩니다.

Bold 글꼴은 물론 굵은 글꼴만 가능합니다.

글꼴 두께를 상속받을 수 있습니다. 단락을 굵게 설정하면 다음과 같이 모든 하위 요소가 굵은 글꼴을 상속합니다.

위 내용은 CSS의 글꼴 가중치 속성 사용 예에 ​​대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!