글꼴 굵은 속성(font-weight)과 CSS의 작동 원리에 대한 자세한 설명

I FONT-굵기 | 굵게 | 500 | 700 | 900

글꼴-가중치 상속은

글꼴 가중치는 모든 요소에 적용됩니다.

사용자 에이전트가 글꼴 변형의 가중치를 결정하는 방법을 이해하려면 먼저 키워드 100~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 Regular 할당 키워드: 일반 할당 번호: 400

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

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

글꼴 스타일: Zurich Black 할당 키워드: 공백 할당 번호: 800

글꼴 형식: Zurich UltraBlack 할당 키워드: 비어 있음 할당 번호: 900

처음 세 숫자는 가장 밝은 글꼴에 할당됩니다. 일반 글꼴은 키워드 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은 다음

더 굵은 글꼴에 할당되며 물론 굵은 글꼴에만 할당됩니다.

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

위 내용은 글꼴 굵은 속성(font-weight)과 CSS의 작동 원리에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!