Замена шрифта Cufon:Как я могу устранить появление нестайлингового текста, возникающего при загрузке страницы?

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 в вашей основной таблице стилей, но это очень вредно для доступности и / или людей, у которых отключены скрипты / flash.

В настоящее время эта проблема является одним из известных ограничений любых методов замены текста на основе скриптов / flash.

Редактировать:

В блоге 24 ways была статья об использовании URI данных с объявлением CSS3 @font-face, чтобы избежать "Вспышки текста без стиля".По сути, вы встраиваете данные шрифта непосредственно в таблицу стилей.

Хотя это некрасиво, это означает, что шрифт загружен с помощью CSS и готов к немедленному использованию.@font-face в настоящее время поддерживается Safari и Firefox и будет поддерживаться в Chrome 4 (который приближается).Поддержка IE ограничена форматом Microsoft EOT, поэтому я считаю его "не поддерживаемым".

Зацени это: Как использовать URI данных, чтобы избежать появления текста без стилей

Другие советы

Подумал, что добавлю это для следующего человека, который ищет ответ на этот вопрос поскольку это, похоже, полностью решило проблему для меня.

.cufon-loading { visibility: hidden; }

Приведенный выше CSS скроет обычный текст, который cufon заменяет перед загрузкой cufon.

Скрывать заголовки с помощью CSS visibility не рекомендуется по причинам, упомянутым выше.В IE8 также возникает проблема с отображением текста cufon, когда он скрыт...

Альтернативой является простое перемещение текста заголовка влево от экрана во время его визуализации, используя большое отрицательное значение "отступ текста".

  1. Вам нужно убрать заголовки с экрана, используя либо стандартный CSS в заголовке, либо, если вы беспокоитесь о скрытии текста от людей, у которых не включен JS, CSS можно задать с помощью jquery.

    например.'#id { текстовый отступ:-9999px;}'

  2. Затем поместите код замены cufon непосредственно перед тегом end body в набор тегов скрипта

  3. Добавьте вызов в Cufon.now();

  4. Используя метод jquery .css(), верните заголовки в режим просмотра, установив отступ текста равным 0

    например.$('#id').css('текстовый отступ', '0');

Редактировать:

Похоже, что начальный отрицательный отступ должен быть установлен с помощью CSS (а не 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