您的位置：首页 > Resource > 使用TypeSelect实现嵌入字体

使用TypeSelect实现嵌入字体

发表于 19. Jul, 2009, 分类: Resource , 5 条评论 »
标签： & &

网站的设计已经越来越偏向个性化了，大家都在想方设法的实现独特的网站风格，嵌入字体/网络字体是达到这一目标的方法之一。而之前，我们在《如何在网页设计中使用个性化字体》中有介绍过typeface.js，它可以很方便的将个性字体嵌入到网页中，并且具有良好的兼容性，从而可以弥补@font-face的不足。但是typeface有个不足——使用typeface的字体不能被选中，这显然会影响网站的用户体验。

现在好了，已经出来了一个非官方的解决方案：Type Select。

TypeSelect事实上是定制了typeface的某些方法，但同时需要jQuery库的支持，用法和typeface是一样的：

在页面的头部加载以下js文件：

<link rel="stylesheet" type="text/css" href="css/typeselect.css"/>
<script type="text/javascript" src="js/typeface-custom.js"></script>
<script type="text/javascript" src="fonts/nilland_regular.typeface.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/typeselect.js"></script>

然后在页面或CSS中定义你要嵌入的字体名称：

HTML中：

<h1 class="select" style="font-family: 'Linux Libertine', Georgia, serif; ">Your Text</h1>

CSS中：

h1 {font-size: 55px; font-family: Nilland, Times; font-weight: normal; font-style: normal;}

请注意以下事项：

  1. 你需要给使用指定字体的元素指定一个”select”类，也就是class=”select”；
  2. 你不需要再使用原始的typeface.js文件，而需要使用typeface-custom.js；
  3. 该效果不支持Opera浏览器；
  4. 尚不支持链接的伪类，如a:hover、a:visited等；
  5. 尚不支持背景色。

欲了解更多，请到这里下载一个演示包，或者到官方网站查看更多信息。

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳。 Follow me on twitter @qianduan。
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。

您或许也会喜欢：

5 个评论

  • 糖伴西红柿 发表于Jul 20, 2009 at 09:18

    倒是实现了个性化的需求，不过要加入这么多的js，性能上不可避免的要受影响啊。。。

    回复
  • 猫石 发表于Jul 20, 2009 at 10:18

    中文字体想实现这样个性化不实际吧。一个字体文件就是几M大小。

    回复
    • 神采飞扬 发表于Jul 20, 2009 at 10:22

      中文字体的确太大，不过如果使用typeface/typeSelect或者cfon，将文字文件(.ttf)转化成js文件，能够大大的减小字体文件的大小，会比直接使用@font-face好很多。

      回复
  • 水表配件 发表于Jul 21, 2009 at 16:08

    通常情况下就是文字的字体不太好选择。老是不如意

    回复
  • edielei 发表于Oct 25, 2009 at 18:07

    这也太麻烦了吧，我有个更好的JavaScript文件。
    /* fontAvailable jQuery Plugin, v1.1
    *
    * Copyright (c) 2009, Howard Rauscher
    * Licensed under the MIT License
    */

    (function($) {
    var element;

    $.fontAvailable = function(fontName) {
    var width, height;

    // prepare element, and append to DOM
    if(!element) {
    element = $( document.createElement( ‘span’ ))
    .css( ‘visibility’, ‘hidden’ )
    .css( ‘position’, ‘absolute’ )
    .css( ‘top’, ‘-10000px’ )
    .css( ‘left’, ‘-10000px’ )
    .html( ‘abcdefghijklmnopqrstuvwxyz’ )
    .appendTo( document.body );
    }

    // get the width/height of element after applying a fake font
    width = element
    .css(‘font-family’, ‘__FAKEFONT__’)
    .width();
    height = element.height();

    // set test font
    element.css(‘font-family’, fontName);

    return width !== element.width() || height !== element.height();
    }
    })(jQuery);

    回复

发表评论