웹 폰트 문제 해결. @font-face troubleshooting.
@font-face 규칙은 CSS3에 새로 추가된 웹 글꼴 명세입니다. 표시하려고 하는 글꼴이 시스템에 없는 경우 웹 서버에서 글꼴을 내려받아 화면에 표시해 주는 방법인데요. 마이크로소프트가 독자적으로 IE 6~8 브라우저에 지원하던 명세였는데 W3C에 제안하여 현재 CSS3 표준 초안이 되었습니다. 그러나 현실에서 사용하려면 다음과 같은 몇 가지 문제를 확실히 알고 있어야 합니다.
- IE 6~8 브라우저는 *.eot 형식의 글꼴만 지원한다. 하지만 W3C가 권장하는 형식은 *.woff 이다. IE 9 브라우저는 *.eot 형식과 *.woff 글꼴을 모두 지원한다.
- Chrome, Safari, Firefox, Opera 최신 버전 브라우저는 *.woff 형식을 지원하지만 *.eot 형식은 지원하지 않는다. 결국 모든 브라우저를 지원하기 위해 *.woff 형식과 *.eot 형식을 함께 준비해야 한다.
- 표준과 비표준 글꼴을 모두 지원하기 위해 @font-face 규칙을 두 번 사용하는 경우 IE 6~9 브라우저는 *.woff 형식과 *.eot 형식을 모두 내려받아 성능에 좋지 않은 영향을 준다.
- @media 구문 안쪽에서 @font-face 규칙을 사용하는 경우 IE 9 브라우저는 글꼴을 요청하지 않는다.
하나의 글꼴에 @font-face 규칙은 한 번만 선언
eot 형식과 woff 형식을 모두 사용해야 한다는 사실을 알고 나면 하나의 글꼴을 모든 브라우저에서 표시하기 위해 @font-face 규칙을 두 번 선언할 수 있습니다. 그러나 이런 방식은 시스템 글꼴이 없는 경우 IE 6~9 브라우저에서 eot 형식 외에 woff 형식도 요청하기 때문에 사용자는 불필요한 1MB 미만의 파일을 추가로 내려받는 샘이 됩니다.
/* Not recommended */
@font-face{font-family:ngwoff; src:url(NanumGothic.woff)}
@font-face{font-family:ngeot; src:url(NanumGothic.eot)}
body{font-family:나눔고딕, NanumGothic, ngwoff, ngeot}
위 코드는 더 나은 성능을 위하여 다음과 같이 개선할 수 있습니다. Paul Irish가 제안한 방탄 코드 입니다.
/* Recommended */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}
이 코드는 추가 설명이 필요합니다.
- ng 라는 글꼴 이름을 한 번만 선언한 다음 eot 형식과 woff 형식을 순차적으로 참조 했습니다.
- IE 6~8 브라우저는 eot 글꼴만 요청해서 화면에 표시합니다. eot 형식을 woff 형식보다 먼저 참조해야 합니다.
- IE 9 브라우저와 Chrome, Safari, Firefox, Opera 브라우저는 woff 글꼴만 요청해서 화면에 표시합니다. @font-face 명세에 따르면 eot 글꼴에 대한 format(‘embeded-opentyep’) 선언이 없기 때문에 브라우저가 eot 글꼴을 내려받아야 하지만 영리하게도 내려받지 않습니다.
- local(※) 값은 외부 자원을 참조하기 이전에 시스템 글꼴을 우선 참조할 수 있도록 만들어 줍니다. 그러나 이 코드에서는 IE 6~8 브라우저가 local() 값을 처리하지 못하는 특징을 이용하여 woff 글꼴을 추가로 요청하지 않도록 해 줍니다.
- local(※) 값의 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것입니다. 굳이 2 byte 짜리 특수문자를 사용한 이유는 Mac OS 에서 2 byte 짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문입니다.
- format(‘woff’) 값을 명시적으로 작성하면 이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있습니다. 값은 반드시 홀따옴표 또는 쌍따옴표 안에 있어야 합니다. 작성하지 않는 경우 지원 여부에 무관하게 모든 형식의 글꼴을 내려받는것이 명세입니다. 글꼴을 지원하지 않으면서도 내려받는 상황을 예방하기 위해 이 형식을 지원하는 경우에만 외부 글꼴을 내려받도록 명시적으로 코드를 작성한 것입니다. IE 7~8 브라우저는 이 코드를 해석하지 못하기 때문에 woff 글꼴을 추가로 요청하지 않도록 만들지만 여기서 그것이 목적은 아닙니다.
- 나눔고딕 시스템 글꼴의 이름을 한글과 영문으로 연거푸 두 번 적은 이유는 영문으로만 작성했을 때 제대로 표시하지 못하는 브라우저가 있기 때문입니다. 한글 이름이 있는 글꼴은 한글과 영문 모두 작성하는 것이 좋습니다.
IE 9은 @media 규칙 내부에 @font-face 허용 안함
다음과 같이 @media 구문 안쪽에 @font-face 규칙을 선언하는 경우 IE 9 브라우저는 외부 글꼴을 요청하지 않기 때문에 표시하지 못합니다. 아래 예제는 Paul Irish가 제안한 방탄 코드를 수정하지 않고 그냥 미디어쿼리 구문 안쪽에 넣었습니다.
/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}
}
처음에는 이 현상이 유일하게 IE 9에만 발생하여 IE 9 버그인줄 알았는데 자세히 알고 보니 IE 9 브라우저만 CSS 2.1 명세에 잘 따른 것이었습니다. CSS 2.1 명세에 따르면 @media 규칙 내부의 또 다른 규칙인 @font-face는 유효하지 않다는 것입니다. 하지만 IE 9을 제외한 모든 브라우저는 이 명세에 따르지 않습니다. 이런 형식의 코드를 이용하면 WiFi/3G 망을 사용하는 좁은 해상도의 모바일 장치에서는 웹 글꼴을 내려받지 않아도 되기 때문에 모바일 성능 향상에 도움이 됩니다. 반응형 웹을 구현하기 위해 누구나 한 번쯤 생각할 수 있는 코드입니다.
CSS 2.1의 @media 명세를 잘 지킨 IE 9 브라우저가 오히려 웹 글꼴을 표시하지 못하는 것은 문제입니다. 이 문제는 @font-face 규칙을 미디어쿼리 밖에 선언함으로써 간단하게 해결할 수 있습니다.
/* IE 9 does not support @font-face within @media */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
@media all and (min-width:768px) {
body{font-family:나눔고딕, NanumGothic, ng}
}
참고
이 포스트와 관련된 문제를 확인하기 위해 작성했던 테스트 케이스 입니다. http://naradesign.net/css3/font-face/ IE 9 브라우저가 CSS 2.1 @media 규칙 명세를 잘 따르기는 했지만 이번에는 오히려 따르지 않는편이 더 좋을뻔 했군요.
IE 6~8 브라우저의 미디어쿼리 규칙을 지원하기 위해 respond.min.js 파일을 사용하는 동시에 미디어쿼리 구문 안쪽에 @font-face 규칙을 추가하는 경우가 있습니다. 이런 경우 IE 9 브라우저에서 개발자 도구(F12)를 이용하여 브라우저 모드와 문서 모드를 IE 8 으로 설정하면 웹 글꼴을 무한 반복 요청하다가 브라우저가 종료되는 문제가 있었습니다. 그러나 실제 IE 8 브라우저에서는 이런 증상이 재현되지 않는것을 확인 했습니다.
웹폰트 지원에 대한 고민이 시원하게 정리됐네요 언제나 좋은 글 감사히 잘 읽고 있습니다.
감사합니다.
그런데 body{font-family:나눔고딕, NanumGothic, ng} 이런식으로 글꼴 순서를 지정했을 때, 나눔고딕이 이미 존재하면 ng @font-face가 실행 안되고 무시 되는 것은 스펙에 맞는 행동이고 모든 브라우저가 그렇게 행동하나요??
제가 직접 테스트해보니 Chrome은 의도대로 나눔고딕이 로컬에 깔려 있을 경우 아무것도 로딩하지 않지만, Firefox 13과 IE9은 woff 파일을 무조건 읽고 있더군요.
즉, 로컬에 나눔고딕이 있어도 FF와 IE9에서는 성능향상 효과가 없습니다.
@권남
테스트 고맙습니다. 말씀하신 결과가 맞네요. 다음과 같은 코드로 추가 테스트를 해봤는데요. 결과가 흥미롭네요.
———-
[영문로컬 > 한글로컬 > 웹폰트] 순으로 선언
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※),url(NanumGothic.woff) format(‘woff’)
}
body{font-family:’Arial Black’, 굴림, ng}
IE 6~9, Firefox는 웹 폰트 1개를 요청. => 오류
Chrome, Safari, Opera는 웹 폰트 요청 안함. => 정상
———-
[영문로컬 > 웹폰트] 순으로 선언
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※),url(NanumGothic.woff) format(‘woff’)
}
body{font-family:’Arial Black’, ng}
IE 6~9, Firefox, Chrome, Safari는 웹 폰트 1개를 요청. => 정상
Opera는 웹 폰트 요청 안함. => 오류
———-
[웹폰트]만 선언
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※),url(NanumGothic.woff) format(‘woff’)
}
body{font-family:ng}
IE 6~9, Firefox, Chrome, Sarari, Opera 모두 각 1개의 웹 폰트 요청. => 정상
———-
결론적으로 IE 6~9, Firefox 브라우저는 불필요한 웹 폰트를 추가로 요청하는 문제가 있구요. 오페라 브라우저는 웹 폰트를 요청해야 하는 상황에서도 요청하지 않는 문제가 있네요.
Font loading guidelines 항목을 보면 이런 문장이 있습니다.
http://www.w3.org/TR/css3-fonts/#font-face-loading
“In cases where a font might be downloaded in character fallback cases, user agents may download a font if it’s listed in a font list but is not actually used for a given text run.”
“글꼴은 문자 대체 수단일 때 다운로드 될 수 있다. 사용자 에이전트는 주어진 문장의 실행을 위해 실제로 사용되지 않더라도 글꼴 목록에 나열되어 있다면 다운로드 할 수 있다.”
IE 6~9, Firefox 브라우저가 성능에 좋지 않은 동작을 수행하기는 하지만 명세에 어긋난 것은 아닌듯 합니다.
한편 Opera를 제외한 나머지 브라우저는 [영문로컬 > 웹폰트] ‘Arial Black’, ‘ng’ 글꼴이 순차적으로 선언된 상황에서 ‘Arial Black’ 글꼴이 한글을 표시할 수 없기 때문에 ‘ng’ 글꼴을 추가로 요청하여 영문은 ‘Arial Black’으로 표시하고 한글은 ‘ng’로 표시를 하는데요. Opera 브라우저는 시스템 글꼴인 ‘Arial Black’을 본문에서 사용했기 때문에 추가로 대체 글꼴을 내려받지 않습니다. 이 방식 또한 명세에서 반드시 다운로드 받아야 한다고 설명한 것이 아니라 ‘다운로드 받을 수 있다’ 또는 ‘다운로드 받아도 된다’는 식으로 설명을 했기 때문에 명세에 어긋난 것으로 간주할 수는 없다고 생각해요.
이런 상황에서는 명세가 중요한 것이 아니라 브라우저가 얼마나 융통성 있고 똑똑하게 처리하는지가 중요한것 같은데요. Chrome, Safari 브라우저가 가장 현명하게 처신하는것 같네요.
html5 책을 사려고 하는데요~
혹시.. 추천해 주실만한 책 없을까요??
완전 초보는 아닌데요 실무에 도움이 될만한 좋은 책 없을까용??
@ckdmsghk
제가 책으로 공부하는 스타일이 아니라서 어떤 서적을 추천해 드려야 할지 잘 모르겠습니다. 사람마다 필요한게 다르기도 하구요. 저는 주로 스펙 또는 스펙 번역된 페이지를 필요할 때마다 찾아 보면서 공부하고 있어요. ^^ http://www.clearboth.org/html5/spec.html
IE9부분을 따로빼기위해 위에 적어주신 !뒤에 -이 한개라 두개넣었더니
css자체가 주석처리가 되는데 어떻게 적용을 시키나요?
@황승준
대시 두 번을 ‘–’ 편집기가 자동으로 대시 한 번 ‘-’으로 변경해 버렸네요. ㅡㅡ;
대시 두 번을 ‘–’ 으로 고쳐서 사용하세요.
이 부분은 표준계열 브라우저는 주석으로 처리합니다. 그러나 IE 9브라우저는 주석으로 처리하지 않고 해석하게 됩니다.
테스트 하는 중에 meta charset=”UTF-8″ 부분으로 인하여
제 폰과 브라우저는 글이 깨집니다.
해당 부분을 없애면 이상이 없으나,
안드로이드 에뮬레이터에서는 문제가 있구요~
조언 부탁드립니다~
항상 감사드립니다.
@여의도
제가 안드로이드 폰이 아니라서 잘 모르겠네요. 에뮬레이터 버그 아닐까요?
에구… 세상이 많이 변했네요;;;
한동안 공부를 소홀히 했더니 ㅠㅠ;
예전엔 익스전용으로 eot를 사용하고, 타 브라우저 ttf 타입을 사용했었는데…;;;
그러면 요즘은 ttf를 사용안하고, woff를 사용하면 되는거죠?
woff 타입이 근래에 나온거면, 폰트 타입 변환이 되려나 모르겠네요…;
ttf도 지원된다면 그냥 써두 상관없겠죠? ㅋㅋ
@마약
ttf 글꼴을 웹폰트로 사용하는 것은 가능하지만 매우 무겁기 때문에 권장할 수가 없습니다. eot, woff 글꼴 사용을 권장합니다. https://code.google.com/p/nanum-web-font/downloads/list
@정찬명
감사합니다^^ 용량문제가 있었군요 ㅎㅎ
웹폰트를 쓰기 위해 여기 저기 뒤적거리고 적용해보다가
IE9에서의 웹폰트가 정상적으로 보이지 않는것때문에 질문 좀 드려도 될까요?
@font-face{
font-family: “NanumGothic”;
font-style: normal;
font-weight: normal;
src: url(“../fonts/NanumGothic.eot”);
src: local(“☺”), url(“../fonts/NanumGothic.woff”) format(“woff”);
}
@font-face{
font-family: “NanumBrush”;
font-style: normal;
font-weight: normal;
src: url(“../fonts/NanumBrush.eot”);
src: local(“☺”), url(“../fonts/NanumBrush.woff”) format(“woff”);
}
body, input, button, textarea, select {font-family:”나눔고딕”,”NanumGothic”,”돋움”,Dotum,”굴림”,Gulim,Verdana,tahoma,Sans-serif; font-size:12px; color:#333; line-height:1.2;}
위와같이 웹폰트를 적용하였고
body 전체에는 나눔고딕을 그리고
나눔브러쉬를 보기위해서 p 태그 한군데에
font-family:”NanumBrush”; 이렇게 주었습니다.
그런데 익스9에서 기본폰트가 먼저 나오고 나눔브러쉬가 나오는 바람에
폰트가 커졌다 작아지는 문제가 있네요 오페라도 마찬가지구요
나놈고딕은 괜찮은데 나눔브러쉬만 특별히 이러는 이유가 혹시 있는지요
웹폰트 테스트중인데 지금 이문제 때문에 머리가 너무 아프네요 ;;
특히 새로고침시에 눈에 띄게 커졌다 작아졌다하네요
@doo
나눔고딕은 용량이 2.3MB 이고 나눔브러시는 1.4MB 정도 됩니다. 하나의 페이지에서 이렇게 무거운 글꼴을 여러개 사용하면 새로고침할 때 렌더링 문제가 발생할 수 밖에 없습니다. 그리고 웹폰트 이름은 시스템 글꼴 이름과 다르게 처리하는 것이 좋습니다. 사용자 시스템에 이미 나눔고딕이 있으면 웹 폰트는 참조하지 않도록 하기 위함입니다.
@정찬명
안그래도 출근길부터 생각하며 왔는데 ^^;
답변 감사드립니다 ^^
하나의 페이지에서 여러개의 글꼴을 사용하면 무거워서 새로고침시에 렌더링 문제가
발생할 수 있다는걸 잘 인지하였습니다.
그래도 궁금한건 궁금한건지라 ^^;;
그래서 나눔고딕을 빼고 나눔브러쉬만 가지고 해봤는데도 IE9에서는 여전히 문제네요
나눔고딕 같은경우는 한치의 흐트러짐도 없는데요 유독 나눔브러쉬만..;;
그래서 다시 나눔명조로 바꾸고 해봤습니다.
나눔명조 또한 별이상없이 새로고침시에도 커졌다 줄어들지않고 잘나옵니다.
유독 나눔브러쉬만 이러는 경우가 있는건가요..?;;
나눔브러쉬처럼 손글씨체를 쓰면 디자인측면에서도 비주얼적으로 잘 표현해 줄거같아
우선 나눔브러쉬를 한번 테스트해보고 싶은데 계속 애를먹네요 ;;
참 그리고 웹폰트 이름과 시스템 글꼴 이름을 다르게 처리하는것이 좋다고 하셨는데
이부분을 잘 이해를 못해서 ;;
혹시
font-family: “ng”;
font-family:”나눔고딕”,”NanumGothic”,ng;
위와같이 ng 로해서 처리를 해주라는것인지요?
@doo
네, 맞습니다. 그냥 NanumGothic 이라고 하면 이게 시스템 글꼴 이름인지 웹 폰트 이름인지 구분이 되지 않으니까요.
웹폰트 사용에 의문점이 많았는데 글이 정말 도움되었습니다~!
초심자가 읽기에도 편하게 글써주셔서 감사합니다. ^^
@Desperado
저의 기쁨이네요. ^^
[...] 웹 폰트 문제 해결_@font-face troubleshooting. [...]
옛한글을 입력하기 위해서 자바스크립트만 이용해서 가볍게 웹 입력기를 만들고있었는데 폰트까지 따로 제작을 하게되서 폰트의 설치만이 번거로웠는데
이를 웹 폰트를 이용해서 해결할 수 있을것 같아 적용해보고있습니다.
확식하게 도움이 많이 되는 포스트입니다. 감사합니다.
감사합니다.
왜 안되나 했더니 브라우저 차이..^^;
@font-face {
font-family: ‘DisneyJuniorRegular’;
src:url(‘http://118.217.181.248disney_fontDisneyJuniorRegular.eot’); src: url(‘http://118.217.181.248disney_fontDisneyJuniorRegular.otf’)format(‘otf’), local(※),
url(‘http://118.217.181.248/disney_font/DisneyJuniorRegular.woff’) format(‘woff’),
url(‘http://118.217.181.248/disney_font/DisneyJuniorRegular.ttf’) format(‘truetype’),
url(‘http://118.217.181.248/disney_font/DisneyJuniorRegular.svg#DisneyJuniorRegular’) format(‘svg’); }
이렇게 했는데도 파폭에서 적용안되는 이유가 뭘까요?? ㅜㅜ
[...] 웹 폰트 문제 해결. @font-face troubleshooting. 이글을 한번 보자~ [...]
[...] http://naradesign.net/wp/2012/06/19/1830/ [...]
@익명
글꼴이 접근 가능한 경로에 있는것이 아니라서 잘 모르겠습니다.
@익명
파폭은 폰트페이스에 크로스도메인 문제가 있습니다. 다른 도메인의 폰트일 경우 훔쳐오는 것으로 것으로 간주! 2년 전에 테스트 했던 것이지만 지금도 그럴 것 같네요. 굳이 이렇게 처리해야 한다면 서버의 헤더를 조작해 처리할 수 있을 것 같습니다.
@정찬명
local(※) 에 실제 폰트명을 사용하는 것은 어떨까요
@lainfox
굳이 local() 부분에서 로컬 폰트를 선언하지 않아도 웹 폰트 이름을 작성하는 font-family 부분에서 선언할 수 있기 때문에 필요성을 느끼지 못하겠어요. local에 선언해서 좋은점이 있나요?
@font-face{
font-family: NanumGothic;
src:url(NanumGothic.eot);
src:local(NanumGothic), url(NanumGothic.woff) format(‘woff’), url(‘NanumGothic.otf’) format(‘opentype’);
}
body { font-family: NanumGothic [, ... ] }
font-family에 NanumGothic 하나만 선언해도 되는 정도겠네요.
@lainfox
양쪽에 다 적어주는 이유를 아직도 잘 모르겠어요. local() 값에 선언하는 것은 IE 6~8에서 해석하지 못하고 body {font-family:NanumGothic} 에 선언하는 것은 모든 브라우저가 해석하므로 이곳에만 적어도 충분하지 않을까요?
font-family 이름을 동일하게 정의 하는 기법이 포인트 입니다. ( ng가 아닌 NanumGothic )
@font-face{
font-family: NanumGothic;
src:url(NanumGothic.eot);
src:local(NanumGothic), local(‘나눔고딕’), url(NanumGothic.woff) format(‘woff’), url(‘NanumGothic.otf’) format(‘opentype’);
}
body {font-family: NanumGothic, Dotum, Gungsuh [, ...] }
IE경우 eot 파일을 시도합니다. 실패하면 font-face 재정의 부분을 무시하고 body {font-family: NanumGothic} 이기 때문에 로컬에 설치된 NanumGothic을 읽습니다.
모던 브라우저는 eot를 무시하고 local선언부를 시도합니다. 로컬에 설치되어있지 않다면 그 다음 순으로 쭉.
(IE6은 환경이 없어서 테스트 하지 못했고, 테스트 하지 않을 것입니다 ㅎㅎ;)
@lainfox
말씀하신 방법대로 진행을 하더라도 이미 body 요소에 로컬 폰트를 지정했기 때문에 local() 값에 또 다시 로컬 폰트를 지정해야 할 필요가 있는지 여전히 의문인데요? local() 값에 나눔고딕 대신 특수문자를 넣어도 결과가 동일하지 않나요? 질문의 요지는 왜 로컬 폰트를 두 번에 걸쳐 반복해서 선언하는지 입니다. ^^
@정찬명
질문의 요지에 대한 답변 = 로컬보다 웹폰트를 먼저 시도한다
정찬명님의 방법 )
body{font-family:나눔고딕, NanumGothic, ng}
ng 폰트명 선언에서 local()에 값을 줄 필요가 없습니다. 이미 body 에 로컬폰트를 먼저 선언했기 때문이죠.
lainfox의 방법 )
body { font-family: NanumGothic }
font-family를 이렇게 사용할 경우에는 NanumGothic 폰트명으로 정의한 부분에서 local()의 값을 특수문자 등으로 제거해 버리면 로컬에 있는 폰트를 읽어오지 않고 바로 웹폰트로 넘어갑니다. 로컬에 설치가 되어있더라도 폰트명이 특수문자이니 패스하고 웹폰트를 시도합니다.
(웹폰트 다운로드가 실패한다면 로컬에 설치된 NanumGothic 을 읽습니다.)
뽀너스 )
동일한 폰트명을 사용하는 multiple name font-family (라고 해야 할까요 ;; ) 기법은 나눔고딕 볼드체도 동일한 폰트명으로 처리할 수 있는 장점 또한 있습니다.
관련된 포스팅을해서 조만간 자세한 피드백 드릴께요 :)
@font-face 에서 재정의한 선언이 우선순위 라고 하면 될 것을 장문으로;; ㅠ ㅠ
local의 사용 목적이 도무지 이해가 안가네요
왜 저 특수문자를 넣는지 좀만 풀어서 설명해주시면 안될까요?
——-
local(※) 값의 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것입니다. 굳이 2 byte 짜리 특수문자를 사용한 이유는 Mac OS 에서 2 byte 짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문입니다.
——–
이부분이 특히 이해가안갑니다.
@raindrop
IE 6~8 브라우저가 두 번째 src 속성을 해석하지 못하도록 하는데 목적이 있습니다.
local 값의 원래 용도는 사용자 로컬 시스템 글꼴이 있는 경우 참조하는 것입니다. Mac 컴퓨터는 시스템 글꼴 이름이 모두 1 바이트로 되어 있기 때문에 2 바이트 이름을 사용해서 아예 제외하도록 한 것이구요.
local 값은 비워두면 안되기 때문에 뭐라도 반드시 넣어야 하고 여기서는 로컬에 전혀 없을만한 글꼴 이름을 넣은 것입니다. 사용 목적이 로컬 글꼴을 참조하는데 있지 않으니까요.
@lainfox
아직 잘 모르겠네요. 혹시 포스팅을 하시면 핑백 부탁드립니다. ^^
정말 고맙습니다. 그런데 그러면
‘dasdasdas’같은 문자열을 local에 넣어도 효과는 비슷하겠군요.
폰트이름이 저럴리는 없으니까..
@raindrop
네, 맞습니다. ^^
계속 읽기만 하다가 질문을 처음 하게 되네요;; 폰트 css소스가 있는데 적용은 되기는 하는데 이게 맞는 소스는 아닌거같아서요…….. 지적을 받고싶습니다!!
이게 맞는건가요? 틀리다면 다르게 어떻게 해야하나요?
@font-face {
font-family: ‘NanumGothic’;
src: url(‘/font/NanumGothic.eot’);
src: url(‘/font/NanumGothic.eot?#iefix’) format(‘embedded-opentype’), url(‘/font/NanumGothic.woff’) format(‘woff’), url(‘/font/NanumGothic.ttf’) format(‘truetype’), url(‘/fonts/NanumGothic.svg#georgiaWeb’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘PT_Sans-Narrow-Web-Bold’;
src: url(‘../font/PT_Sans-Narrow-Web-Bold.eot’);
src: url(‘../font/PT_Sans-Narrow-Web-Bold.eot?#iefix’) format(‘embedded-opentype’), url(‘../font/PT_Sans-Narrow-Web-Bold.woff’) format(‘woff’), url(‘../font/PT_Sans-Narrow-Web-Bold.ttf’) format(‘truetype’), url(‘../font/PT_Sans-Narrow-Web-Bold.svg#georgiaWeb’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘PT_Sans-Narrow-Web-Regular’;
src: url(‘../font/PT_Sans-Narrow-Web-Regular.eot’);
src: url(‘../font/PT_Sans-Narrow-Web-Regular.eot?#iefix’) format(‘embedded-opentype’), url(‘../font/PT_Sans-Narrow-Web-Regular.woff’) format(‘woff’), url(‘../font/PT_Sans-Narrow-Web-Regular.ttf’) format(‘truetype’), url(‘../font/PT_Sans-Narrow-Web-Regular.svg#georgiaWeb’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘PT_Sans-Web-Bold’;
src: url(‘../font/PT_Sans-Web-Bold.eot’);
src: url(‘../font/PT_Sans-Web-Bold.eot?#iefix’) format(‘embedded-opentype’), url(‘../font/PT_Sans-Web-Bold.woff’) format(‘woff’), url(‘../font/PT_Sans-Web-Bold.ttf’) format(‘truetype’), url(‘../font/PT_Sans-Web-Bold.svg#georgiaWeb’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘PT_Sans-Web-BoldItalic’;
src: url(‘../font/PT_Sans-Web-BoldItalic.eot’);
src: url(‘../font/PT_Sans-Web-BoldItalic.eot?#iefix’) format(‘embedded-opentype’), url(‘../font/PT_Sans-Web-BoldItalic.woff’) format(‘woff’), url(‘../font/PT_Sans-Web-BoldItalic.ttf’) format(‘truetype’), url(‘../font/PT_Sans-Web-BoldItalic.svg#georgiaWeb’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘PT_Sans-Web-Italic’;
src: url(‘../font/PT_Sans-Web-Italic.eot’);
src: url(‘../font/PT_Sans-Web-Italic.eot?#iefix’) format(‘embedded-opentype’), url(‘../font/PT_Sans-Web-Italic.woff’) format(‘woff’), url(‘../font/PT_Sans-Web-Italic.ttf’) format(‘truetype’), url(‘../font/PT_Sans-Web-Italic.svg#georgiaWeb’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘PT_Sans-Web-Regular’;
src: url(‘../font/PT_Sans-Web-Regular.eot’);
src: url(‘../font/PT_Sans-Web-Regular.eot?#iefix’) format(‘embedded-opentype’), url(‘../font/PT_Sans-Web-Regular.woff’) format(‘woff’), url(‘../font/PT_Sans-Web-Regular.ttf’) format(‘truetype’), url(‘../font/PT_Sans-Web-Regular.svg#georgiaWeb’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: ‘RixGoB’;
src: url(‘../font/RixGoB.eot’);
src: url(‘../font/RixGoB.eot?#iefix’) format(‘embedded-opentype’), url(‘../font/RixGoB.woff’) format(‘woff’), url(‘../font/RixGoB.ttf’) format(‘truetype’), url(‘../font/RixGoB.svg#georgiaWeb’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
안녕하세요. 현재 사이트 개발중에 웹폰트를 적용하고 있습니다.
소스는 아래와 같고 IE만 정상적으로 웹폰트가 적용이 되었고 나머지 (파이어폭스, 크롬, 사파리, 오페라 등등)브라우저에서는 웹폰트가 적용이 전혀 안되더라구요.
해결책이 있을까요? 아니면 어떤 문제인지 알고 싶습니다.
@font-face {
font-family: ‘NaG’;
src: url(‘/common/font/NanumGothic.eot’);/* ie6~8 */
src:local(※), url(‘/common/font/NanumGothic.eot?#iefix’) format(‘embedded-opentype’),
url(‘/common/font/NanumGothic.woff’) format(‘woff’),/* ie9, Chrom, safari, opera, firefox */
url(‘/common/font/NanumGothic.ttf’) format(‘truetype’);
}
@font-face {
font-family: ‘NaGB’;
src: url(‘/common/font/NanumGothicBold.eot’);/* ie6~8 */
src:local(※), url(‘/common/font/NanumGothicBold.eot?#iefix’) format(‘embedded-opentype’),
url(‘/common/font/NanumGothicBold.woff’) format(‘woff’),/* ie9, Chrom, safari, opera, firefox */
url(‘/common/font/NanumGothicBold.ttf’) format(‘truetype’);
}
@font-face {
font-family: ‘NaGEB’;
src: url(‘/common/font/NanumGothicExtraBold.eot’);/* ie6~8 */
src:local(※), url(‘/common/font/NanumGothicExtraBold.eot?#iefix’) format(‘embedded-opentype’),
url(‘/common/font/NanumGothicExtraBold.woff’) format(‘woff’),/* ie9, Chrom, safari, opera, firefox */
url(‘/common/font/NanumGothicExtraBold.ttf’) format(‘truetype’);
}
@font-face {
font-family: ‘FOR’;
src: url(‘/common/font/FredokaOne-Regular.eot’);/* ie6~8 */
src:local(※), url(‘/common/font/FredokaOne-Regular.eot?#iefix’) format(‘embedded-opentype’),
url(‘/common/font/FredokaOne-Regular.woff’) format(‘woff’),/* ie9, Chrom, safari, opera, firefox */
url(‘/common/font/FredokaOne-Regular.ttf’) format(‘truetype’);
}
감사합니다.^^
@초보자
잘 적용이 된다면 딱히 문제는 아닐텐데요. 굳이 문제라면 웹 폰트를 너무 많이 쓴다는게 문제일 수 있습니다. 한 페이지에 하나 이상의 웹 폰트는 페이지 성능에 치명적인 부담을 줄 수 있습니다. 특히 모바일에서는 웹 폰트를 안쓰는게 좋습니다.
@김종호
코드만 봐서는 별 문제가 없어 보이는데요. 실제로 이 문제가 재현되는 페이지 URL을 보여주시면 문제를 확인하는데 도움이 될것 같습니다.