4

作業中のサイトで選択した見出し要素のフォントを 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>

私は何を間違っていますか？前もって感謝します！

4

4 に答える 4

7

ブラウザーは (スタイルシートで指定された標準のテキスト レンダリングを使用して) ページ全体をレンダリングし、次に Cufon スクリプトが戻ってそれを置き換えます。ブラウザーがページをレンダリングする方法と、ページの DOMLoaded イベントの後にスクリプトが起動するという事実のために、置換されていないテキストの瞬間的なフラッシュを回避する良い方法はありません。

「良い」方法はないと言いました...メインのスタイルシートでCSSに置き換えられるテキストを非表示にするなど、悪い方法がありますが、アクセシビリティやスクリプト/フラッシュを使用している人にとっては非常に悪いですオフ。

現在、この問題は、スクリプト/フラッシュ ベースのテキスト置換技術の既知の制限の 1 つです。

編集：

24 の方法のブログには、CSS3 の @font-face 宣言でデータ URI を使用して「スタイルのないテキストのフラッシュ」を回避する方法に関する記事がありました。基本的に、フォント データをスタイルシートに直接埋め込みます。

きれいではありませんが、フォントが CSS で読み込まれ、すぐに使用できる状態になっていることを意味します。@font-face は現在 Safari と Firefox でサポートされており、Chrome 4 でもサポートされる予定です (近づきつつあります)。IE のサポートは Microsoft の EOT 形式に限定されているため、「サポートされていません」とカウントします。

チェックアウト:データ URI を使用してスタイルのないテキストのフラッシュを回避する方法

于 2009-12-10T21:31:29.810 に答える
6

私の問題を完全に解決したように見えるので、この問題に対する答えを探している次の人のためにこれを追加すると思いました.

.cufon-loading { visibility: hidden; }

上記の CSS は、cufon が読み込まれる前に、cufon が置き換えるプレーンテキストを非表示にします。

于 2012-05-22T16:48:35.530 に答える
1

上記の理由により、CSSの可視性を使用して見出しを非表示にすることはお勧めできません。IE8には、非表示の場合のcufonテキストのレンダリングにも問題があります...

別の方法は、大きな負の「text-indent」値を使用して、レンダリング中に見出しテキストを画面の左側に移動することです。

  1. ヘッダー内の標準CSSを使用して見出しを画面外に移動する必要があります。または、JSが有効になっていないユーザーからテキストを非表示にする必要がある場合は、jqueryを使用してCSSを設定できます。

    例えば。'#id {text-indent：-9999px; } '

  2. 次に、スクリプトタグのセット内で、終了本文タグの直前にcufon置換コードを配置します

  3. Cufon.now（）;への呼び出しを追加します。

  4. jquery .css（）メソッドを使用して、text-indentを0に設定することにより、見出しを表示に戻します。

    例えば。$（'＃id'）。css（'text-indent'、 '0'）;

編集：

jqueryコードが呼び出される前にページを完全にロードする必要があるため、最初の負のインデントは（jqueryではなく）CSSで設定する必要があるようです。

CSSを使用してインデントを設定する際の危険性は、JSをオフにしている人は、見出しがまったく表示されないことです。

合理的な解決策を見つけたら、ここに投稿します。

于 2010-01-11T20:09:29.203 に答える
1

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>
于 2010-09-08T21:53:05.713 に答える