@ font-face vs. cufon - PullRequest
       64

@ font-face vs. cufon

10 голосов
/ 27 июля 2011

Я работаю над сайтом и в настоящее время использую технику @ font-face ( this + this ) для загрузки шрифтов. Я заметил, что некоторые из специальных символов загружаются неправильно -> ŠĐŽČĆ šđžčć. То есть эти символы существуют в самом шрифте. Итак, я сделал тест ... Я загрузил тестовую страницу со шрифтами @ font-face и cufon ... Результат ниже ->

enter image description here

и, конечно, вот код ->

<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>

Пока я пытался переключить кодировку с utf8, widnwos1250, и, похоже, ничего не работает с техникой @ font-face ...

Итак, у меня два вопроса ... Кто-нибудь знает, что здесь происходит? И если я переключусь на использование cufon вместо @ font-face - насколько это замедлит загрузку страницы? (заключительный cufon использует JS для загрузки шрифтов)

Спасибо, что уделили время!

Ответы [ 5 ]

9 голосов
/ 14 августа 2011

Недавно у меня было много проблем с @ font-face, когда я работал над веб-сайтом, интенсивно использующим веб-шрифты, и оказалось, что сами инструменты для создания веб-шрифтов были виновны.Они просто генерировали плохие .woff / .ttf /.svg /.otf, в результате чего lot проблем, для которых было очень трудно точно определить источник проблемы.

По моему опыту, единственная онлайн-служба генерации веб-шрифтов, которая обеспечивает 100% достоверность - выдайте бесплатные веб-шрифты, это Шрифт Белка .Это также позволяет использовать много полезных вещей, таких как поднабор шрифтов, что также может быть проблемой в вашем случае (т. Е. Вы не указали включение дополнительных символов в ваши сгенерированные веб-шрифты - сербский / хорватский является частью Latin Extended B, если яне ошибаюсь).

1 голос
/ 06 августа 2014

Н2 имеет неправильное определение шрифта: отсутствуют одинарные кавычки.

Сейчас:

font-family:ReprobateCROLASTRegular;

Должно быть:

font-family:'ReprobateCROLASTRegular';
1 голос
/ 26 октября 2011

Вы пробовали это с http://fontface.codeandmore.com/ альтернативным генератором @ font-face?.

0 голосов
/ 16 сентября 2011

У вас хорошая реализация.

Но когда вы использовали font-face. Шрифт, который вы использовали. Должны быть все персонажи, которые вы хотите использовать. .Ttf или что-либо еще должно иметь все символы и специальные символы, когда вы будете его использовать.

Когда вы использовали Cufon. Генератор Cufon создаст для вас множество дополнительных букв шрифтов. В генераторе шрифтов Cufon. Вы можете выбрать много дополнительных шрифтов для шрифта.

Ты понимаешь это?

0 голосов
/ 14 августа 2011

Вы, кажется, решили проблему со шрифтом;Что касается времени загрузки, мой опыт показывает, что как font-face, так и cufon могут быть достаточно медленными, чтобы иметь краткую вспышку текста по умолчанию.Конечно, это зависит от вашего хоста и подключения пользователя;но оба метода требуют относительно тяжелой загрузки (либо JS, либо шрифта).

Итак, при прочих равных ИМХО, вы также можете использовать font-face;по крайней мере, браузеры улучшают кэширование файла шрифта, поэтому после начальной загрузки страницы вы можете ускорить рендеринг.С cufon он всегда должен загружать и выполнять JS, чтобы вы никогда не избавлялись от этой части времени загрузки.

...