Safari에서 font-family: initial을 써도 부모 글꼴이 남는 이유

세 줄 요약

font-family: initial은 부모 글꼴이 아니라 해당 속성의 초깃값을 사용해야 한다.
WebKit은 이를 상속처럼 처리하던 오류를 Safari Technology Preview 255에서 수정했다.
unset은 글꼴 상속을 끊는 대체값이 아니며, 특정 디자인이 목적이면 글꼴 목록을 직접 지정할 수 있다.

initial이 상속처럼 동작하던 WebKit 오류다

Safari에서 자식 요소에 font-family: initial을 지정했는데도 부모 글꼴이 남는다면, WebKit에 보고된 초기화 오류와 같은 조건인지 살펴볼 수 있다. 10월 22일 공개된 Safari Technology Preview 255는 이 값이 inherit처럼 동작하던 문제를 수정 목록에 넣었다.

이 변경은 테스트용 브라우저의 릴리스다. 정식 Safari와 iPhone의 Safari에 같은 수정이 모두 들어갔다는 의미는 아니다. 지금 사용할 수 있는 비교 대상은 수정이 명시된 Technology Preview 255다.

부모 밖의 텍스트와 초기화한 자식을 비교한다

WebKit 버그 보고는 부모에 fantasy 글꼴을 지정하고, 그 안의 자식만 initial로 되돌리는 짧은 예제를 사용한다. 다음은 같은 조건을 구분하기 쉽게 적은 예제다.

<style>
  .parent { font-family: fantasy; }
  .reset { font-family: initial; }
</style>
<p>Sample text</p>
<div class="parent">
  <span>Sample text</span>
  <span class="reset">Sample text</span>
</div>

다른 스타일이 없는 문서라면 첫 문단과 .reset의 글꼴은 같아야 한다. 가운데 텍스트는 부모의 장식 글꼴을 이어받는다. 초기화한 마지막 텍스트까지 부모 글꼴로 표시되면 이 보고의 증상에 해당한다. 비교할 때는 기본 글꼴과 fantasy가 실제로 다르게 보이는 환경을 사용한다.

unset으로 바꾸면 상속이 남는 것이 정상이다

CSS 명세는 초기화와 상속을 구분한다. font-family는 기본적으로 상속하는 속성이므로, 다음 값들은 서로 다른 결과를 요구한다.

값	font-family에서의 의미
`initial`	속성의 초깃값을 사용한다.
`inherit`	부모의 계산된 값을 이어받는다.
`unset`	상속 속성이므로 inherit처럼 동작한다.
`revert`	현재 출처의 스타일을 되돌린다. 부모로부터 상속될 수 있다.

따라서 부모 글꼴을 끊겠다는 목적으로 unset을 선택하면 의도와 어긋난다. revert 역시 부모의 글꼴 지정까지 지우는 명령은 아니다.

원하는 디자인이 있다면 글꼴을 명시한다

서비스 화면에서 고딕 계열을 쓰려는 목적이라면 font-family: sans-serif처럼 원하는 글꼴 계열을 직접 지정할 수 있다. 특정 글꼴을 먼저 쓰고 없을 때 대체하려면 우선순위 목록을 둔다.

.component {
  font-family: "Noto Sans KR", sans-serif;
}

이 선언 자체가 Noto Sans KR을 내려받지는 않는다. font-family 문서에 설명된 것처럼 설치됐거나 웹폰트로 제공된 글꼴에서 선택하고, 없으면 다음 후보를 사용한다. 또한 명시적 목록은 브라우저 초깃값을 복원하는 것과 다른 디자인 선택이다. 초기 글꼴은 브라우저에 따라 달라지므로 initial을 특정 글꼴 이름과 같다고 볼 수 없다.

Technology Preview는 정식 Safari와 나란히 실행할 수 있는 별도 앱이다. 초기화 의미를 유지해야 하는 컴포넌트는 두 앱에서 같은 예제를 비교하고, 기존 브라우저용 명시적 글꼴 지정이 필요한지 결정할 수 있다.