当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > TypeSelect实现网页嵌入字体

CSS样式表
CSS:提高网页在浏览器的渲染速度
css网页制作实用技巧9则
思考Web站点设计对类以及id的命名方式
CSS教程:关于网页图片的属性
CSS教程:元素层叠级别及z-index
div css在思路和流程上实现结构与表现的分离
CSS入门教程:网页首字下沉
IE6、IE7和FF的最简单的hack技巧
跨浏览器实现float:center
css技巧:经典CSS使用技巧几则
CSS教程:legend标签设定宽度
网站进行W3C XHTML1.0验证的经验
CSS教程:网页颜色的几种表示
网页CSS背景图片使用的测试结果
CSS网页布局:网页页面结构化
SPAN和DIV,Class与ID的区别汇总
xhtml css网页制作中问题解决的方式
div css与xhtml css是什么意思?
CSS样式表优化更整洁而简短
CSS设计网站导航菜单的优势

CSS样式表 中的 TypeSelect实现网页嵌入字体


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-13   浏览: 70 ::
收藏到网摘: n/a

现在好了,已经出来了一个非官方的解决方案: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. 尚不支持背景色。

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