Cufon Font 교체 : 페이지가로드 될 때 발생하는 무모한 텍스트의 플래시를 어떻게 제거 할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/1884145

문제

Cufon을 사용하여 중이에있는 사이트에서 선택한 제목 요소의 글꼴을 교체하지만 페이지를로드 할 때마다 Cufon이 텍스트를 대체하기 전에 눈에 띄지 않는 텍스트의 눈에 띄는 플래시가 있습니다. 나는 내가 잘못하고있을 것으로 기대한다. 여기에 내가 가진 것이 있습니다 <head>:

<script src="/js/Monotype_Corsiva_italic_400.font.js"></script>
<script src="/js/PalatinoBoldum_700.font.js"></script>
<script>
Cufon.replace('header h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('header h2', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('aside h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('#site-info h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('abbr[title="My Abbreviation"]', { fontFamily: 'PalatinoBoldum' });
</script>

그리고 여기 내 문서 끝에있는 내용이 있습니다.

<script>
// !Cufon: replace the fonts
// --------------------------------------------
Cufon.now();
// !Track & analyze stats
// --------------------------------------------
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
// Google analytics stuff...
</script> <!-- EO Tracking -->
</body>
</html>

내가 뭘 잘못하고 있죠? 미리 감사드립니다!

도움이 되었습니까?

해결책

브라우저는 전체 페이지를 렌더링합니다 (스타일 시트에 지정된 표준 텍스트 렌더링을 사용하여 Cufon 스크립트가 돌아와 대체됩니다. 브라우저가 페이지를 렌더링하는 방식과 페이지의 domloaded 이벤트 이후 스크립트가 발생한다는 사실로 인해 교체되지 않은 텍스트의 순간적인 플래시를 피할 수있는 좋은 방법은 없습니다.

나는 "좋은"방법이 없다고 말했다 ... 메인 스타일 시트에서 CSS로 대체 될 텍스트를 숨길 수있는 나쁜 방법이 있지만, 접근성 및/또는 스크립트/플래시가 회전 한 사람들에게는 매우 나쁘다. 끄다.

현재이 문제는 스크립트/플래시 기반 텍스트 교체 기술의 알려진 한계 중 하나입니다.

편집하다:

24 가지 방법 블로그에는 CSS3 @font-face 선언과 함께 데이터 URI를 사용하는 것에 관한 기사가있어서 "스타일되지 않은 텍스트의 플래시"를 피했습니다. 기본적으로 글꼴 데이터를 스타일 시트에 직접 포함시킵니다.

예쁘지는 않지만 글꼴에 CSS가 장착되어 즉시 사용할 준비가되어 있음을 의미합니다. @font-face는 현재 Safari와 Firefox에서 지원되며 Chrome 4 (가까워지고 있음)에서 지원됩니다. IE 지원은 Microsoft의 EOT 형식으로 제한되므로 "지원되지 않는"것으로 간주합니다.

확인 해봐: 데이터 URI를 사용하여 스타일링되지 않은 텍스트의 플래시를 피하는 방법

다른 팁

이 문제에 대한 답변을 찾고있는 다음 사람이 나에게 문제를 완전히 해결 한 것으로 보이는 다음 사람에게 이것을 추가 할 것이라고 생각했습니다.

.cufon-loading { visibility: hidden; }

위의 CSS는 CUFON이 Cufon 하중 전에 교체하는 일반 텍스트를 숨 깁니다.

CSS 가시성을 사용하여 제목을 숨기는 것은 위에서 언급 한 이유로 권장되지 않습니다. IE8은 또한 숨겨져있을 때 Cufon 텍스트를 렌더링하는 데 문제가 있습니다 ...

대안은 큰 부정적인 '텍스트 별'값을 사용하여 렌더링하는 동안 단순히 제목 텍스트를 화면 왼쪽으로 옮기는 것입니다.

  1. 헤더 내의 표준 CSS를 사용하여 제목을 화면에서 옮기거나 JS를 활성화하지 않은 사람들의 텍스트를 숨기는 것에 대해 걱정하는 경우 CSS는 jQuery를 사용하여 설정할 수 있습니다.

    예를 들어. '#ID {텍스트 -안정 : -9999px; } '

  2. 그런 다음 End Body 태그 직전에 Cufon 교체 코드를 스크립트 태그 세트 내에 배치하십시오.

  3. cufon.now ()에 호출을 추가합니다.

  4. jQuery .css () 메소드를 사용하여 텍스트 통계를 0으로 설정하여 제목을 다시 볼 수 있습니다.

    예를 들어. $ ( '#id'). css ( 'text-indent', '0');

편집하다:

jQuery 코드가 호출되기 전에 페이지를 완전히로드해야하기 때문에 초기 부정적인 들여 쓰기는 (jQuery 대신)로 설정해야합니다.

CSS를 통해 들여 쓰기를 설정하는 데있어서의 위험은 JS를 끄는 사람들이 제목을 전혀 볼 수 없다는 것입니다.

합리적인 솔루션을 찾으면 여기에 게시하겠습니다.

JS를 사용하여 스타일 규칙을 삽입하여 바디로드 전에 Cufon'd 텍스트를 숨길 수 있습니다 ...

<html>
  <head> ... </head>
  <body>
    <script> // put this at the beginning of the body

      (function(){
        var i = document.styleSheets.length,
            s = document.createElement('style');
        document.head.appendChild(s);
        document.styleSheets[i].addRule(
          'h1,h2,h3,h4,h5,h6',
          'text-indent:-9999px'
        );
      }());

    </script>

    ...

  </body>
</html>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top