让你的网站使用个性化字体
2014-03-18 15:52
190 查看
大家都知道,网页上不管你用了多漂亮的字体,在一台没有安装你用的字体的电脑上,始终还是显示“宋体”
“宋体”就像个屌丝,走到哪都不起眼,但是利用CSS3,我们便可以随意呈现自己想要给别人看的字体了
下面这个例子,让我的网站使用”华康少女“字体。
同级目录下放了一个hksn.ttf文件,是”华康少女文字 - Kelvin“字体,html如下:
CSS的font是一个个递推的,找不到前面的找下一个,这样已经有字体的用户就不用再载入网络资源里的字体了
我不知道别人是找到字体名的,我用的方法是,打开PS,用文字工具,然后找到想要的字体,这里的字体名就是CSS可以用的字体名
当然了,IE8及以下浏览器是不支持CSS3的
“宋体”就像个屌丝,走到哪都不起眼,但是利用CSS3,我们便可以随意呈现自己想要给别人看的字体了
下面这个例子,让我的网站使用”华康少女“字体。
同级目录下放了一个hksn.ttf文件,是”华康少女文字 - Kelvin“字体,html如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>特殊字体随意用</title> <style type="text/css" media="screen"> @font-face{ font-family: HKSNfont; src: url('./hksn.ttf'), url('./hksn.eot'); /* IE9+ */ } div{ font-family:'华康少女文字 - Kelvin',HKSNfont; /* CSS的font是一个个递推的,找不到前面的找下一个 */ font-size: 18px; } </style> </head> <body> <div>特殊字体随意用</div> </body> </html>
CSS的font是一个个递推的,找不到前面的找下一个,这样已经有字体的用户就不用再载入网络资源里的字体了
我不知道别人是找到字体名的,我用的方法是,打开PS,用文字工具,然后找到想要的字体,这里的字体名就是CSS可以用的字体名
当然了,IE8及以下浏览器是不支持CSS3的
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- flash 系统字体显示问题
- 谈谈网页设计中的字体应用Font Set
- PDF里的文字显示模糊的解决方法
- 保证可下载的漂亮动作2008奥运比赛项目字体
- 网页设计中的 serif 和 sans-serif字体应用
- ExtJs默认的字体大小改变的几种方法(自己整理)
- 一个实现字体大中小方法的JavaScript代码
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- php修改NetBeans默认字体的大小
- 如何解决修改StaticText的字体