오래 전에 CSS font-family 속성에 여러 단어를 포함하는 글꼴 이름을 따옴표로 묶는 것이 "모범 사례"로 간주되었다는 소식을 들었습니다.
font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
도대체 따옴표를 제거하려고 시도 "Arial Narrow"했으며 Safari와 Firefox는 렌더링하는 데 문제가 없습니다.
그래서,이 경험 법칙에 논리가 있습니까, 아니면 단지 신화입니까? 현재 버전에 더 이상 적용되지 않는 이전 브라우저의 문제였습니까? 나는 이것을 너무 오랫동안 해왔 기 때문에 그것이 실제로 필요한지 생각하는 것을 멈추지 않았습니다.
답변:
CSS 2.1 스펙 라고 우리에게 이야기한다 :
글꼴 패밀리 이름은 문자열로 인용되거나 하나 이상의 식별자 시퀀스로 인용되지 않아야합니다. 즉, 각 토큰의 시작 부분에있는 대부분의 구두점 문자와 숫자는 인용되지 않은 글꼴 패밀리 이름으로 이스케이프되어야합니다.
다음과 같이 말합니다.
일련의 식별자가 글꼴 패밀리 이름으로 제공되는 경우 계산 된 값은 시퀀스의 모든 식별자를 단일 공백으로 결합하여 문자열로 변환 된 이름입니다.
이스케이프 실수를 방지하려면 하이픈 이외의 공백, 숫자 또는 구두점 문자가 포함 된 글꼴 패밀리 이름을 인용하는 것이 좋습니다.
예, 차이가 있지만 문제를 일으키지 않을 것입니다. 개인적으로 나는 항상 공백이 포함 된 글꼴 이름을 인용했습니다. 몇 가지 (아마도 매우 드물지만) 경우에는 따옴표가 절대적으로 필요합니다.
키워드 값 ( 'inherit', 'serif', 'sans-serif', 'monospace', 'fantasy'및 'cursive')와 동일한 글꼴 패밀리 이름은 키워드와의 혼동을 방지하기 위해 인용되어야합니다. 같은 이름으로. 키워드 'initial'및 'default'는 향후 사용을 위해 예약되어 있으며 글꼴 이름으로 사용할 때도 인용해야합니다.
또한 / 또는!와 같은 구두점에 유의하십시오. 식별자 내에서 인용하거나 이스케이프 해야 할 수도 있습니다.
2013 년 10 월 CSS 글꼴 모듈 레벨 3 사양 에 따르면 " 일반 계열 이외의 글꼴 계열 이름은 문자열로 인용하거나 하나 이상의 식별자 시퀀스로 인용하지 않아야합니다 ". 따라서 따옴표로 묶을 필요가 없습니다.
그러나 " 대부분의 구두점 문자와 각 토큰의 시작 부분에있는 숫자는 이스케이프 처리되어야합니다 ". 실수를 피하기 위해 W3C는 실제로 공백, 숫자, 구두점 또는 키워드 값 ( '상속', 'serif'등)이 포함 된 글꼴 패밀리 이름을 인용 할 것을 권장합니다 .
일반 글꼴 패밀리 이름 ( 'serif', 'sans-serif', 'cursive', 'fantasy'및 'monospace')은 실제로 키워드이므로 인용하면 안됩니다.
스타일이 인라인이면 <font style="font-family:Arial Narrow">some texte</font>작동합니다.
그러나 경찰 글꼴의 이름에 특수 문자가 포함되어 있거나 숫자로 시작하는 숫자에 따옴표 또는 기타 이상한 것 (예 : "01 Digitall"또는 "a_CityNovaTitulB & WLt"또는 "Bailey'sCar")이 포함 된 경우 다음과 같은 특수 구문을 사용해야합니다. & quot; 모든 종류의 이상한 글꼴 이름에 적용 할 수 있습니다.
<font style="font-family:"a_CityNovaTitulB&WLt" , "Bailey'sCar"">some text</font>
FireFox에서 소스는 & quot; 이렇게 : "
이 트릭이 없으면 다음과 같습니다.
<font style="font-family:a_CityNovaTitulB&WLt ,Bailey'sCar">some text</font>
모든 브라우저에서 자동으로 작동하지는 않습니다. "8 핀"과 같이 숫자로 시작하는 글꼴 이름 마녀에 유용합니다.