本站公告: 暂无公告....

响应式Web设计--自适应字体

前端开发 兰亭楼 0评论 567浏览
首先我们得有字体。网上有很多很棒的字体资源站点,有免费的也有收费的。虽然Google也提供了免费的网页字体,且基本上都可使用@font-face规则(www.google.com/webfonts),但我个人最喜欢Font Squirrel(www.fontsquirrel.com)。另外还有Typekit (www.typekit.com) 和Font Deck(www.fontdeck.com)上也有一些非常优秀的付费字体。 enter image description here 巧合的是,我在网站中使用的来自Font Squirrel的字体都是免费的(我承认我抠门 :))。这些字体包括Bebas Neue、Bitstream Vera Sans和Collaborate Thin。从Font Squirrel上下载的@font-face包是一个ZIP文件,里面包含该字体各种格式的文件(WOFF、TTF、EOT 和SVG),以及一个用来演示字体调用规则的stylesheet.css文件。例如,使用Bebas Neue字体的规则如下:
@font-face { font-family:'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: url('BebasNeue-webfont.eot?#iefix') format('embedded- opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal;}

和浏览器私有前缀的原理类似,浏览器会根据自身特性应用列表中能识别的样式,忽略无法识别的样式。用这种方法能保证无论什么浏览器都有一个可用字体。 上面这段代码对“复制粘贴党”来说很方便,但需要注意字体文件的存放路径。比如我一般会将ZIP包中的字体文件存放在一个专门的fonts文件夹,该文件夹与css文件夹平级。因此我将上面这段代码拷贝到样式表文件中之后,还需要对文件路径做点修改,具体如下所示:
@font-face { font-family:'BebasNeueRegular'; src: url('../fonts/BebasNeue-webfont.eot'); src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeue-webfont.woff') format('woff'), url('../fonts/BebasNeue-webfont.ttf') format('truetype'), url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal;}

接下来就是给相关样式设置正确的字体和粗细(如果需要)。此处我想将导航链接文字的字体修改为Bebas Neue:
nav ul li a { height:42px; line-height:42px; text-decoration: none; text-transform: uppercase; font-family:'BebasNeueRegular'; font-size:1.875em;/*30 ÷ 16 */ color: black;}

导航栏在浏览器中变成了如下效果: enter image description here 替换字体之后一般还需要修改字体大小。不过我们之前已经将字体换算过程写在了注释里,那就很容易依此修改了。如果设计图和CSS代码都使用同一款字体,那会有一个额外的好处,你可以直接从设计图中获取字体大小。比如我们例子中的设计图对“EVERY YEAR…”开头的这段文字大小设定为102像素,所以直接使用百试不爽的“目标元素尺寸÷上下文元素尺寸=百分比尺寸”公式,将文字大小转换为相对尺寸:

#content h1 {  font-family:Arial,Helvetica,Verdana, sans-serif; text-transform: uppercase; font-family:'BebasNeueRegular'; font-size:6.375em;/* 102 ÷ 16 */}

将所有相关样式中的font-family和font-size声明全部修改之后,(使用WOFF字体格式的)网页在Google Chrome浏览器中的效果如下图所示: enter image description here 网站的整体效果尚不完美,但现在字体完美还原了设计图中的效果。为了对比效果,我们看看iPad 2(iOS 4.2之后的版本支持TTF字体格式)上的显示效果: enter image description here  

转载请注明: 兰亭楼 » 响应式Web设计--自适应字体

发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址