Geek Answers Handbook

Cufon multiple fonts - How?

I am trying to implement two cufon fonts on one page for the first time. This does not work.

This is presented as an example in the documentation:

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

What I don't understand is the relationship between fontFamily: "Vegur " and the actual file Vegur_300.font.js ?

In other words, how does the browser know that "Vegur" is a specific file?

early

+5
source share
5 answers

He knows, because your Vegur_300.font.js file contains a command Cufon.registerFontthat contains the object parameter font-family(in face).

.js , Cufon . , , . ?

+7

, , 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>
+9
<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>

.

0

Cufon -, , .

()

Cufon, . , , . , Cufon , , fontFamily.

0

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

To use multiple fonts, you only need to specify which font you want to use, and you installed:

<!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>
0
source

More articles:


All Articles