소낙눈님 내용 요약
따옴표는 특정 상황에서 폰트 적용에 문제가 발생할 가능성을 차단해주기 때문에 사용하는 것을 권장합니다.
따옴표에 대한 오해
웹 폰트를 적용하기 위해 구글링을 좀 해 보셨다면 아마 다음과 같은 답변을 정말 흔히 보셨을 겁니다.
"폰트 이름이 한글이거나 폰트 이름에 띄어쓰기가 있다면 (반드시) 따옴표로 감싸야 한다"
이에 따르면 따르면 폰트 적용 시 아래와 같은 형태로 구문을 사용해야 할 것입니다.
.text1 {
font-family: Pretendard; /* 상관 없음 */
}
.text2 {
font-family: 'Pretendard Variable'; /* 따옴표 필수 */
}
.text3 {
font-family: '굴림'; /* 따옴표 필수 */
}
하지만 그렇지 않습니다.
한글이든 띄어쓰기가 있든 따옴표로 감싸지 않아도 됩니다.
따옴표는 '(단독으로) 사용 불가능한 문자(열)'가 폰트명에 들어갈 때 사용해야 합니다.
하지만 일반적으로 '한글'이나, 단어 사이에 들어간 '공백'은 사용 불가능한 문자가 아닙니다.
따라서 따옴표를 사용하지 않아도 문제가 발생하지는 않습니다.
폰트 표기법에 대한 보다 자세한 정보는 이 글과 폰트 따옴표 검사기를 참고하세요.
따옴표 생략의 문제점
그렇다면 구문 작성 시 따옴표를 생략해야 할까요?
따옴표 검사기를 몇 번 돌려보면 대부분의 경우 따옴표를 생략해도 문제가 없음을 알 수 있습니다.
.text4 {
font-family: Pretendard Variable; /* 가능 */
}
.text5 {
font-family: 맑은 고딕; /* 가능 */
}
하지만 폰트 이름을 따옴표로 감싸는 것을 권장합니다.
좀 더 과하게는, 감싸지 않아도 될 것 같은 경우에도(단일 단어 등) 따옴표로 감싸는 것이 편합니다.
물론 대부분의 경우에서 따옴표를 넣지 않아도 문제가 생기지 않습니다.
하지만 반대로 말하면 따옴표가 반드시 필요한 경우가 있으며 + 대개 따옴표를 넣는다고 문제가 생기지는 않기 때문입니다.
|| 따옴표를 넣으면 문제가 되는 경우 || 대체 옵션(Generic Font)은 폰트명이 아니라 일종의 키워드입니다. 따라서 대체 옵션을 따옴표로 감싸면 폰트명으로 인식되어 대체 옵션이 적용되지 않습니다. 대체 옵션의 사용 방법은 CXFT : 폰트 적용의 기초를 참고하세요. |
특히 따옴표 필요 판정 메커니즘은 생각보다 복잡합니다.
예를 들어 폰트명에서 숫자는 위치에 따라 따옴표의 필수 여부가 달라집니다.
.text6 {
font-family: 1FontSample; /* 불가능 */
}
.text7 {
font-family: FontSample1; /* 가능 */
}
따옴표로 감싸 주기만 하면 신경 쓸 필요 없어지는 문제를 굳이 하나하나 따져가며 작업할 필요는 없겠죠?
트게더이벤트
댓글 0개 ▼