2011-07-27 5 views
10

나는 웹 사이트에서 현재 @ font-face (this + this)를 사용하여 글꼴을로드하고 있습니다. 일부 특수 문자가 제대로로드되지 않음을 알았습니다 -> ŠĐŽČĆ šđžčć. 이 문자는 글꼴 자체에 있습니다. 여기>@ font-face vs. cufon

enter image description here

물론, - 그래서, 나는 결과는 다음과 같습니다 @ 글꼴 얼굴 글꼴과 cufon 글꼴 ...와 테스트 페이지를로드 ... 테스트를했다 코드입니다 - 지금까지 내가 UTF8, widnwos1250에서 인코딩을 전환 tryed했습니다, 그리고 아무것도 @ 글꼴 얼굴 기법을 이해와 함께 작동하도록 보인다>

<html> 
    <head> 
     <script type="text/javascript" src="cufon-yui.js"></script> 
     <script type="text/javascript" src="ReprobateCRO_400.font.js"></script> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 
     <script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script> 
     <style type="text/css"> 
      @font-face { 
       font-family: 'ReprobateCROLASTRegular'; 
       src: url('reprob_cro_last_last-webfont.eot'); 
       src: local('ReprobateCROLASTRegular'), 
        url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'), 
        url('reprob_cro_last_last-webfont.woff') format('woff'), 
        url('reprob_cro_last_last-webfont.ttf') format('truetype'), 
        url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
      } 
      h2{ 
       font-family:ReprobateCROLASTRegular; 
      } 
     </style> 
    </head> 
    <body> 
     <h1>--> CUFON --> šđžčć ŠĐŽČĆ</h1> 
     <br/><br/> 
     <h2>--> @FONT-FACE --> šđžčć ŠĐŽČĆ</h2> 
    </body> 
</html> 

... 그래서

, 나는 두가 질문 ... 할 아무도 여기서 무슨 일이 일어나는 지 알아? 그리고, 만약 내가 font-face의 cufon insted를 사용한다면, 페이지 로딩 속도가 얼마나 느려지겠습니까? (cufon은 JS를 사용하여 글꼴을로드합니다.)

감사합니다!

+1

내가 모르는 뭔가가되어야하지만, 나에게 올바른 보이는 ... –

+0

@Andrej 사용하고있는 브라우저는? –

+0

@ font-face의 특수 문자는 모든 최신 브라우저에서 엉망입니다. 크롬, 파이어 폭스, IE> 7, 오페라, 사파리에서 테스트되었습니다 ... – Andrej

답변

9

최근 웹 글꼴 집약적 인 웹 사이트에서 일하면서 @ font-face에 많은 문제가 있었으며 온라인 웹 글꼴 생성 도구 자체가 유죄라는 것을 알게되었습니다. 그들은 단순히 는 문제의 원인을 파악하는 것이 매우 힘들었다있는 문제의 많은 결과/.OTF 파일 .svg/.TTF/ .woff 나쁜 생성.

제 경험상 무료 웹 글꼴을 100 % 유효하게 발행하는 유일한 온라인 웹 글꼴 생성 서비스는 Font Squirrel입니다. 그것은 또한 당신의 경우에 문제가 될 수도있는 폰트 서브 셋팅과 같은 많은 유용한 것들을 허용한다. (즉, 생성 된 웹 폰트에 추가 문자를 포함시키지 않았다 - 세르비아어/크로아티아어는 라틴 확장 B의 일부이다. 실수는 아닙니다).

0

글꼴 문제를 해결 한 것 같습니다. 다시 :로드 시간, 내 경험에 따르면 글꼴 얼굴과 cufon 둘 다 기본 텍스트가 잠깐 깜박일 정도로 느려질 수 있습니다. 그것은 귀하의 호스트와 물론 사용자의 연결에 달려 있습니다; 두 가지 방법 모두 비교적 많은 다운로드 (JS 또는 글꼴)가 필요합니다.

그래서 다른 모든 것들은 IMHO와 같지만 font-face를 사용할 수도 있습니다. 적어도 브라우저가 폰트 파일을 캐싱 할 때 점점 좋아 지므로 초기 페이지가로드 된 후에는 더 빨리 렌더링 할 수 있습니다. cufon을 사용하면로드 시간의 일부를 없애지 않으므로 항상 JS를로드하고 실행해야합니다.

0

구현이 좋습니다.

하지만 font-face를 사용했을 때. 사용한 글꼴. 사용하고 싶은 모든 문자가 있어야합니다. .ttf 또는 당신이 그것을 사용할 때 모든 문자와 특수 문자가 있어야합니다.

Cufon을 사용했을 때. Cufon 생성기는 추가 글꼴 문자를 많이 만듭니다. Cufon의 글꼴 생성기에서. 글꼴에 대한 많은 추가 항목을 선택할 수 있습니다.

이해 하시겠습니까 ??

1

H2의 글꼴 정의가 잘못되었습니다. 작은 따옴표가 없습니다.

지금이다 :

font-family:ReprobateCROLASTRegular; 

은 다음과 같아야합니다

font-family:'ReprobateCROLASTRegular';