게시된 페이지에서는 테마가 설정한 --font-family와 --heading-font-family를 사용할 수 없습니다.
재현 방법:
- 테마를 생성하고 CSS에 다음을 입력합니다.
:root {
--font-family: CommonTestFont;
--heading-font-family: CommonTestHeaderFont;
}
- 그리고 color-definitions에 다음을 입력합니다.
:root {
--font-family: ColDefTestFont;
--heading-font-family: ColDefTestHeaderFont;
}
일반 페이지에서는 변수가 다음 순서(우선순위 높음 - 낮음)로 사용됩니다.
- common에서 정의된 변수
- 사이트 설정에서 정의된 변수
- color-definitions에서 정의된 변수
게시된 페이지에서는 변수가 다음 순서(우선순위 높음-낮음)로 사용됩니다.
- 사이트 설정에서 정의된 변수
- color-definitions에서 정의된 변수
- common에서 정의된 변수
여기서 두 가지 일이 일어나고 있습니다.
- color-definitions CSS 파일이 사이트 설정에서 정의한 font 변수를 테마의 color-definitions 섹션의
:root뒤에 배치하여 이를 덮어씁니다. - 게시된 페이지에서는 CSS 로드 순서가 다르기 때문에, color-definitions CSS가 페이지 본문(body)에 로드되어 그곳에서 정의된 변수가 테마의 common CSS를 덮어씁니다.