Cufon несколько шрифтов - Как?

Я пытаюсь реализовать 2 шрифта cufon на одной странице в первый раз. Это не работает.

В документации это приведено в качестве примера:

            <script src="Vegur_300.font.js" type="text/javascript"></script>
    <script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">
                    Cufon.replace('h1', { fontFamily: 'Vegur' });
        Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
    </script>

Я не понимаю, какая связь между fontFamily: 'Vegur' и фактическим файлом Vegur_300.font.js?

Другими словами, как браузер узнает, что «Вегур» — это именно этот файл?

заранее спасибо


cufon
person swisstony    schedule 06.05.2010    source источник

Ответы (5)


arrow_upward
7
arrow_downward

Это известно, потому что ваш файл Vegur_300.font.js содержит команду Cufon.registerFont, которая содержит параметр объекта font-family (в face).

Пока все ваши файлы шрифтов .js выполняются, Cufon получает регистрационную информацию с данными кривой для каждого шрифта. Что касается того, почему это не работает для вас, я не могу рассуждать без дополнительной информации. У вас есть образец сайта?

person Plynx    schedule 06.05.2010
comment
Спасибо Плинкс. Проблема решена! Ваш ответ помог мне проверить фактический файл javascript шрифта. Там я увидел эту строку: face:{font-family:Unit-MediumLF, поэтому я знал, что в CSS нужно поместить «Unit-MediumLF». Я думаю, что в документации это должно быть лучше освещено. - person swisstony; 06.05.2010

arrow_upward
9
arrow_downward

Это очень просто, давайте предположим, что вы используете 2 семейства шрифтов "Segoe UI" и "Bauhaus 93", затем разместите скрипты, как показано ниже:

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Segoe_UI_400.font.js" type="text/javascript"></script>
<script src="js/Bauhaus_93_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Segoe UI' });
Cufon.replace('h2', { fontFamily: 'Bauhaus 93' });     
</script>
person Shree    schedule 27.05.2011

arrow_upward
0
arrow_downward 

<script src="Vegur_300.font.js" type="text/javascript"></script>
<script type="text/javascript">
  Cufon.replace('h1');
</script>

<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
  Cufon.replace('h2');
</script>

Это сработало для меня.

person Chris    schedule 30.11.2010
comment
Причина, по которой я предлагаю это, заключается в том, что я не мог заставить ответ сверху работать на меня. - person Chris; 24.02.2011

arrow_upward
0
arrow_downward

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

Используйте следующее значение в качестве семейства шрифтов сгенерированного шрифта (необязательно)

Вы должны использовать то же имя при вызове Cufon, иначе оно не будет работать должным образом. Я думаю, что это может быть причиной того, что ваша замена шрифта не работает. Таким образом, Cufon узнает, на какой шрифт вы ссылаетесь, когда вы вызываете fontFamily.

person Gui Premonsa    schedule 28.09.2012

arrow_upward
0
arrow_downward

См.: https://github.com/sorccu/cufon/wiki/usage.

Использование нескольких шрифтов

Чтобы использовать несколько шрифтов, вам нужно только указать, какой шрифт вы хотите использовать, и все готово:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Vegur' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
<h2>This text will be shown in Myriad Pro.</h2>
</body>
</html>
person Zeno Yu    schedule 08.10.2012