Question

我第一次尝试在同一页面上实现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 文件之间的联系是什么？

换句话说，浏览器如何知道'Vegur'是特定文件？

提前致谢

Answer 1

非常简单，让我们假设您使用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>

Answer 2

它知道，因为您的 Vegur_300.font.js 文件包含Cufon.registerFont命令，其中包含font-family对象参数（在face中）。

只要你的所有字体.js文件都在执行，Cufon就会获得每种字体的曲线数据的注册信息。至于为什么它不适合你，我不能在没有更多信息的情况下推测。你有一个样本网站吗？

Answer 3

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

这对我有用。

Answer 4

在their website上生成Cufon字体时，指定用于字体的名称。

使用以下值作为生成字体的字体系列（可选）

在调用Cufon时必须使用相同的名称，否则它将无法正常工作。我认为这可能是你的字体替换不起作用的原因。这就是Cufon在你进行fontFamily调用时知道你所指的字体的方式。

Answer 5

请参阅： 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>

Cufon多种字体 - 怎么样？

5 个答案: