我试图创建一个使用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" );