Javascript 如何使用CSS'；s@字体_Javascript_Css_Raphael_Font Face

Javascript 如何使用CSS'；s@字体

javascript css

Javascript 如何使用CSS'；s@字体,javascript,css,raphael,font-face,Javascript,Css,Raphael,Font Face,我试图创建一个页面，该页面使用java脚本通过PHP获取数据，然后使用CSS样式表中声明的自定义字体显示数据。整个页面应该使用一种自定义字体，我在主CSS文件中使用@font-face声明了这种字体，如下所示： @font-face { font-family: 'bauhaus'; src: url('fonts/Bauhaus.woff') format('woff'), font-weight: normal; font-style: normal; }

我试图创建一个页面，该页面使用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>

如果我这样做的话，根本不会出现“Test123”文本（我假设它无法找到或使用“bauhaus”样式），如果我删除字体族属性，它会使用浏览器的默认样式（在我的例子中是Arial）显示文本。另一方面，“FONTTEST”文本使用正确的@font-face字体正确显示

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

谢谢你的帮助

您可以明确地指定文本的样式，而不考虑真正的用途

编写一个特定的styler对象函数，如：

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

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

与其在JS中直接写出CSS属性，为什么不将顶部的CSS从#canvas_container更改为.canvas_container，然后将属性“class='canvas_container'”放在所有要使用该字体的元素上？指定class属性应该比指定style属性更容易

如果您希望整个页面都使用您的字体，则更好的方法是将其放入CSS中（在您的示例中，是样式元素）：

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

好吧，在搜索了Raphael的代码后，我发现它会自动在所有文本元素上设置自己的字体样式（Arial）。我认为这没有什么意义，尤其是因为我不知道如何用CSS“@font-face”字体覆盖它，但没关系。我的解决方案是简单地删除Raphael源代码中字体属性的自动设置

对任何感兴趣的人来说，它是在

文本

声明的部分。只需删除

res.attrs

中的

font:availableAttrs.font

位，所有内容都将遵循您想要的CSS样式。

您需要向cufon注册字体。请参阅和。

嗨，谢谢你的回答。不幸的是，两者都不起作用。如果我像你建议的那样全局设置字体，html文件中的所有文本都将是正确的字体，但是使用RaphaelJS创建的任何文本仍然没有正确设置样式。我甚至尝试通过jquery访问对象，并设置样式

$（txt.node）.addClass（“canvas_容器”）但这也不起作用。我很困惑。
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" );

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