如何使用CSS's @font-face为JavaScript创建文本设置样式

How to style JavaScript created text using CSS's @font-face

本文关键字：JavaScript 创建 文本 样式 设置 @font-face CSS 何使用      更新时间：2023-09-26

我试图创建一个使用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')，如果我删除字体系列属性，它显示我使用浏览器的默认样式，在我的情况下是Arial文本。另一方面，使用正确的@font-face Font可以正确显示'FONTTEST'文本。

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

谢谢你的帮助!

与其在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和BODY元素使用您的字体，除非稍后覆盖。

嗯，在对Raphael的代码进行了一些搜索之后，我发现它会自动为所有文本元素设置自己的字体样式(Arial)。我不认为这真的有意义，特别是因为我不知道如何用CSS的"@font-face"字体覆盖它，但好吧。我的解决方案是简单地删除Raphael源代码中font属性的自动设置。

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

您需要注册cufon字体。

你可以明确指定文本的样式，而不用考虑真正的样式。

编写一个特定的样式对象函数，如:

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" );
相关文章：