在网页页面中置入随意字体样式的处理计划方案

字体样式应用是网页页面设计方案中不能或缺的一一部分。常常地,大家期待在网页页面中应用某一特殊字体样式,可是该字体样式并不是流行实际操作系统软件的内嵌字体样式,那样客户在访问网页页面的情况下就会有将会看不见真正的设计方案。美工设计设计方案师最经常做的方法是把要想的文本制成照片,那样做几个显著缺点:1. 不能能大范畴的应用该字体样式;2. 照片內容相对性应用文本不容易改动;3. 不好于网站SEO(流行检索模块不容易将照片alt內容做为分辨网页页面內容有关性的合理要素)。互联网上面有一些应用sIFR技术性、或javascript/flash hack的方式,但完成起來或繁杂,或有缺点。。

第一步

获得要应用字体样式的三种文档文件格式,保证能在流行访问器上都能一切正常显示信息该字体样式。

.TTF或.OTF,可用于Firefox 3.5、Safari、Opera

. Explorer 4.0+

.SVG,可用于Chrome、IPhone

下边要处理的是怎样获得到某类字体样式的这三种文件格式文档。一般地,大家手中头顶(或在设计方案資源站点早已寻找)有该字体样式的某类文件格式文档,最经常见的是.TTF文档,大家必须根据这类文档文件格式变换为其他二种文档文件格式。字体样式文档文件格式的变换能够根据网站FontsQuirrel或onlinefontconverter出示的线上字体样式变换服务获得。这儿强烈推荐第一个站点,它容许大家挑选必须的标识符转化成字体样式文档(在服务的最终一个选择项),那样就大大的减缩了字体样式文档的尺寸,促使本计划方案更具有好用性。

第二步

获得到三种文件格式的字体样式文档后,下一步要在款式表格中申明该字体样式,并在必须的地区应用该字体样式。

字体样式申明以下:


  url('fontName.woff') format('woff'),
  url('fontName.ttf') format('truetype'),
  url('fontName.svg#fontName') format('svg');

/*在其中fontName更换给你的字体样式名字*/


p { font: 13px fontNameRegular, Arial, sans-serif; }
h1{font-family: fontNameRegular}


下列为引入的內容:

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns= 1999/xhtml
head
meta http-equiv= Content-Type content= text/html; charset=utf-8 /
title 在网页页面中置入随意字体样式的详细处理计划方案 - CSS9.NET /title
link rel= stylesheet href= articleimg/2009/12/7263/style.css /
style type= text/css
@font-face {
 font-family: 'hakuyoxingshu7000Regular';
 src: url('articleimg/2009/12/7263/7000.eot');
 src: local('hakuyoxingshu7000 Regular'), local('hakuyoxingshu7000'), url('articleimg/2009/12/7263/7000.ttf') format('truetype'), url('articleimg/2009/12/7263/7000.svg#hakuyoxingshu7000') format('svg');
}
#poem{
  font-size:45px;
  font-family:hakuyoxingshu7000Regular;
  text-align:center;
}
#poem p{height:30px;line-height:30px;}
/style
/head
body
div id= testdiv
  h1 在网页页面中置入随意字体样式的详细处理计划方案 - CSS9.NET /h1
  h2 浏览全文: a href= css-font-face-solution/ css-font-face-solution/ /a nbsp; nbsp; nbsp;关心Web前端开发开发设计 - a href= a /h2
  div id= poem
h3 云为素餐 /h3
p 京都有同窗好友,相约素餐阁。 /p p 听者犹未尽,言者语已多。 /p p 满座皆友朋,畅谈人生何民科。 /p p 禅中寄小语,慎言且温和。 /p
/div

/body
/html


上边原文中的字体样式用的是本blog以前公布的一款钢笔行书字体样式,喜爱的能够去免费下载。

免费下载该实例的源码:网页页面置入字体样式实例

全文:css-font-face-solution/