如何使用CSS的@ JavaScript -face设置字体创建文本的样式

Question

我正在尝试创建一个页面，它使用java脚本通过PHP获取数据，然后使用CSS样式表中声明的自定义字体显示它。整个页面应该使用一种自定义字体，我已经在主CSS文件中使用@ font -face声明了该字体，如下所示：

@font-face {
    font-family: 'bauhaus';
    src: url('fonts/Bauhaus.woff') format('woff'),
    font-weight: normal;
    font-style: normal; }

我的HTML文件如下所示：

<html>  
<head> 
    <script type="text/javascript" src="resources/raphael-min.js"></script>  
    <script type="text/javascript" src="resources/index.js"></script> 
    <link href="Main.css" rel="stylesheet" type="text/css">
    <style type="text/css">  
        #canvas_container {  
            width: 100%;  
            border: 1px solid #aaa; 
            font-family:'bauhaus', "Times New Roman", Times, serif;
        }  
    </style>  
</head>  
<body>  
    <div id="canvas_container">FONTTEST</div>  
</body>  
</html>  

在index.js中，我可以使用Raphaeljs的语法创建文本对象，如下所示：

var txt = paper.text(150, 590, 'Test123').attr({'font-family': bauhaus, 'font-size':'70', fill:'#000'});

如果我这样做，根本不会出现“Test123”文本(我假设是因为它找不到或使用样式“包豪斯”)，如果我去掉字体系列属性，它会使用浏览器的默认样式显示文本，在我的例子中是Arial。另一方面，使用正确的@ Font -face字体可以正确显示'FONTTEST‘文本。

现在我的问题是，如何让Raphaeljs (或其他Javascript库)创建的文本自动遵循CSS语句声明的样式？我喜欢使用自定义字体，但我找不到一个合适的解决方案来轻松地使用Javascript的样式化文本。

谢谢你的帮忙!

Answer 1

好吧，在搜索了拉斐尔的代码后，我发现它会自动在所有的文本元素上设置自己的字体样式(Arial)。我不认为这真的有什么意义，特别是我不知道如何用CSS '@ font -face‘字体覆盖它，但好吧。我的解决方案是简单地删除拉斐尔源代码中字体属性的自动设置。

对于任何感兴趣的人来说，它都是在声明theText的部分。只需删除res.attrs中的CSS位，一切都将遵循您想要的font: availableAttrs.font样式。

Answer 2

与其在JS中写出CSS属性，不如将顶部的CSS从#canvas_container改为.canvas_container，然后将属性"class='canvas_container‘“放在您希望使用该字体的所有元素上。指定class属性应该比指定style属性更容易。

如果你想让整个页面使用你的字体，一个更好的方法是把它放在你的CSS中(在你的例子中是style元素)：

html, body { font-family: 'bauhaus', "Times New Roman", Times, serif; }

这将使所有HTML和正文元素使用您的字体，除非稍后被覆盖。

Answer 3

您需要将字体注册到cufon。参见http://raphaeljs.com/reference.html#Raphael.registerFont和https://github.com/sorccu/cufon/wiki/about。