标签: cufon

如何在HTML5 Canvas元素中使用自定义字体?

我看过像Cufon和typeface.js这样的东西,但它们似乎是SIFR替代品,不允许你设置自由形式坐标并将自定义类型绘制到 <canvas>

有人有任何想法吗?

html5 fonts canvas cufon typeface.js

71
推荐指数
2
解决办法
7万
查看次数

Cufon如何影响搜索引擎优化和搜索机器人?

我一直在网上搜索,无法找到使用Cufon如何影响SEO的问题的答案(来自Google,Bing,Yahoo的机器人......阅读页面).我知道原始文本仍然存在,但它位于标记内部,位于标记内部,并且位于标记旁边(而不是旁边应该在其旁边的单词).换句话说,搜索机器人是否读取"搜索依据",就像他们阅读下面的cufon生成的html一样?

<cufon class="cufon cufon-canvas" alt="search" style="width: 72px;
height: 28.1667px;">
<canvas width="95" height="28" style="width: 95px; height: 28px; top:
0px; left: -5px;"/>
<cufontext>search</cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt=" by:" style="width: 36px;
height: 28.1667px;">
<canvas width="68" height="28" style="width: 68px; height: 28px; top:
0px; left: -5px;"/>
<cufontext> by:</cufontext>
</cufon>
Run Code Online (Sandbox Code Playgroud)

我真的很喜欢cufon,因为我不是一个图形人,但我也不想破坏任何好的SEO我已经去.

提前感谢任何帮助或建议,Chuck Foster

seo image cufon

14
推荐指数
1
解决办法
2万
查看次数

11
推荐指数
2
解决办法
1万
查看次数

@ font-face vs Google Fonts vs Cufon

所以我被迫在一个我正在开发的网站上使用@ font-face,并且不得不说与Google字体相比,我对交叉浏览器渲染质量印象深刻,但它似乎确实对http请求与Cufon相比,因为每个字体需要四个变体用于正文复制,有时需要一对标题.

我一直与cufon合作,因为我发现它是灵活,可靠的跨浏览器和移动,并且尽管偶尔有一些奇怪的空白问题,但易于使用.我对谷歌字体做的不多,因为在某些浏览器中渲染很糟糕.

显然技术已经发展了!这三者有何不同,三者中是否有任何严重的缺陷?

css cufon font-face google-font-api

11
推荐指数
1
解决办法
7858
查看次数

Web字体嵌入与sifr?

我想使用非标准的Web字体来改善HTML的外观.

是嵌入网络字体还是使用像sifr这样的东西?

我的理解是sifr是一个基于flash的矢量字体查看器,但我一直不愿意尝试它,因为它看起来有点复杂.

关于网络字体嵌入似乎没有很多令人鼓舞的讨论(因为法律问题)所以也许sifr更像是一种标准的方式来做到这一点?

对于任何反馈,我们都表示感谢.谢谢.

sifr typography cufon webfonts typekit

10
推荐指数
1
解决办法
1664
查看次数

@ font-face vs. cufon

我正在一个网站上工作,目前使用@ font-face tehnique(this + this)来加载字体.我注意到一些特殊字符没有正确加载 - >ŠĐŽČĆšđžčć.也就是说,这些字符存在于字体本身中.所以,我做了一个测试...我用@ font-face字体和cufon字体加载了一个测试页...结果如下 - >

在此输入图像描述

当然,这里是代码 - >

<html>
    <head>
        <script type="text/javascript" src="cufon-yui.js"></script>
        <script type="text/javascript" src="ReprobateCRO_400.font.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
        <script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script>
        <style type="text/css">
            @font-face {
                font-family: 'ReprobateCROLASTRegular';
                src: url('reprob_cro_last_last-webfont.eot');
                src: local('ReprobateCROLASTRegular'),
                     url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'),
                     url('reprob_cro_last_last-webfont.woff') format('woff'),
                     url('reprob_cro_last_last-webfont.ttf') format('truetype'),
                     url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg');
                font-weight: normal;
                font-style: normal;
            }
            h2{
                font-family:ReprobateCROLASTRegular;
            }
        </style>
    </head>
    <body>
        <h1>--> CUFON --> š?ž?? Š?Ž??</h1>
        <br/><br/>
        <h2>--> @FONT-FACE --> š?ž?? Š?Ž??</h2>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

到目前为止,我已尝试从utf8,widnwos1250切换编码,似乎没有任何东西可以与@ font-face tehnique一起使用...

所以,我有两个问题......有谁知道这里发生了什么?并且,如果我切换到使用cufon insted @ font-face …

html css fonts cufon font-face

10
推荐指数
1
解决办法
5936
查看次数

如何在某些元素上禁用Cufon?

我目前使用Cufon在我们的网站上使用类似于Cufon.set('fontFamily', 'DIN Medium').replace('h1');现在的单个H1标签,我希望Cufon被禁用,这不是将H1标签更改为任何其他标签,它必须保持原样.

如果需要,我可以在H1标签中添加类等,并且可以在不更改实际标签的情况下执行任何HTML/CSS/JS.

任何人都知道这是否可能,如果是这样的话?

提前致谢,

沙迪

html javascript css cufon

9
推荐指数
1
解决办法
2万
查看次数

如何检测jQuery验证何时完成,并根据该事件调用某些内容?

我是jQuery的新手.

同时使用jQuery验证插件和cufon给了我很多时间.

基本上,我想在jQuery Validation完成它必须做的事情之后检测事件并在它之后直接调用Cufon.refresh().

$('#commentForm').validate({
    rules: {
        password: {
            required: true,
            minlength: 8,
            maxlength: 8,
            number: true
        },
    }
});
Run Code Online (Sandbox Code Playgroud)

我们期待<label class="error"> SOME TEXT </label>表单无效时.

一旦创建,我想在jQuery Validation创建的标签上使用Cufon.refresh(). 如何检测jQuery验证何时完成,并根据该事件调用某些内容?

任何帮助非常感谢.问候,Piotr

javascript jquery jquery-validate cufon

9
推荐指数
1
解决办法
2万
查看次数

我可以在没有Cufon的拉斐尔使用印刷品吗?

我正在尝试使用Raphael文档中提到的print命令来打印带有漂亮字体的文本.[我看到这可以很好地使用"文本"功能完成,我在网上看到使用Cufon生成的字体和打印功能的例子(如'text'和'print'的例子),但是我我正在做的尽可能接近我在文档中的例子并且对我不起作用,我想知道为什么.

这是我的代码:

<html>
    <head>
        <title>Raphael Print Test</title>
        <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
        window.onload = function() {
            var paper = new Raphael('holder', 640, 480);
            paper.ellipse(320, 240, 320, 240).attr({stroke: "grey"});
            paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
            paper.text(50, 50, "Raphaël\nkicks\nbutt!");
        }
        </script>
        <style type="text/css">  
            #holder { width: 640px; height: 480px; border: 2px solid #aaa; }  
        </style>  
    </head>  
    <body>  
        <div id="holder"></div>  
    </body>  
</html>  
Run Code Online (Sandbox Code Playgroud)

重要的是:

paper.print(100, 100, "Test string", paper.getFont("Times", 800), 30);
Run Code Online (Sandbox Code Playgroud)

如此处所述.

当我尝试它(在OS X上的Chrome和Opera中,到目前为止),我得到: …

javascript raphael cufon

8
推荐指数
1
解决办法
5679
查看次数

异步加载的Cufon不会在IE中呈现

我正在创建一个使用Cufon的网站,由于大量的Javascript,在页面权重方面特别重.因此,我正在尝试与head.js(http://headjs.com/)异步加载脚本,如下所示:

head.js("http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js", function() {
 head.js("/js/libs/cufon-yui.js", function() {
    head.js("/js/shared/Stag_Bold_700.font.js" , function() {
            Cufon.replace('h1', { fontFamily: 'Stag Bold' });
    });
 });
});
Run Code Online (Sandbox Code Playgroud)

因此首先下载Jquery,然后按顺序下载后续的cufon lib文件和cufon字体,然后最终调用Cufon来替换H1.显然,这是一个精简的示例,更换次数较少,但仅在尝试更换H1时仍然无效.

问题是,仅在Internet Explorer(6/7/8)中,文本没有被替换,但我可以看到Cufon肯定被称为.我可以确定这一点,因为标签中添加了"cufon-active cufon-ready"类.当我使用IE Developer工具栏检查标记时,cufon/cufoncanvas标记位于所选元素内部,但是由于缺少更好的单词,它们是不可见的.

在IE9中,脚本的行为与Chrome和Firefox类似.我已经尝试调整Cufon绘图引擎并更新到最新的1.09i版本以获得良好的衡量标准.如果我将Cufon调用语句移动到文档就绪事件而不是异步加载,它可以工作,但我正在尝试优化页面加载,我的网站将使用许多Cufon字体以及许多其他JS插件.我也尝试使用labs.js和head.js来异步加载适当的文件.

javascript ajax optimization internet-explorer cufon

7
推荐指数
1
解决办法
4549
查看次数