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'文本（我假设它找不到或使用'bauhaus'样式），如果我删除了font-family属性，它会使用浏览器向我显示文本默认样式，在我的情况下是Arial。另一方面，使用正确的@ font-face字体正确显示'FONTTEST'文本。

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

感谢您的帮助！

Answer 1

为什么不在顶部将CSS从#canvas_container更改为.canvas_container，然后将属性“class ='canvas_container'”放在所有元素上，而不是在JS中内联写出CSS属性。你想要那个字体？应该比style属性更容易指定class属性。

如果您希望整个页面使用您的字体，更好的方法是将它放在您的CSS中（在您的情况下，样式元素）：

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

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

Answer 2

好吧，经过一段时间搜索Raphael的代码后，我发现它会自动在其所有文本元素上设置自己的字体样式（Arial）。我不认为这真的有意义，特别是因为我无法弄清楚如何用CSS'@ font-face'字体覆盖它，但还可以。我的解决方案是简单地删除Raphael源代码中字体属性的自动设置。

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

Answer 3

您需要使用cufon注册字体。请参阅http://raphaeljs.com/reference.html#Raphael.registerFont和https://github.com/sorccu/cufon/wiki/about。

Answer 4

您可以明确指定文本样式而不考虑实际行为。

编写特定的样式对象函数，如：

function Styler( style )
{
  this._style = style;

  this.get = function( text)
  {
    return "<span style=" + this._style + "'>" + text + "</span>";
  }
}

然后到处使用：

myStyler = new Styler( 'font-size: 20px; font-weight: bold' );

    ...

    text1 = myStyler.get( "text1" );
    text2 = myStyler.get( "text2" );

如何使用CSS的@ font-face为JavaScript创建文本的样式

4 个答案: