开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《HTML5+CSS3网页设计入门必读》——6.4 使用Web字体

简介:
+关注继续查看

本节书摘来自异步社区《HTML5+CSS3网页设计入门必读》一书中的第6章,第6.4节,作者: 【美】Julie Meloni更多章节内容可以访问云栖社区“异步社区”公众号查看。

6.4 使用Web字体

在上一节中,看到我们十分确信所用的字体系列驻留在每个人的计算机上。也就是说,可以保证大多数计算机都会呈现Arial或Times New Roman,或者具有用于serif和sans-serif的所必需的默认字体,如果这是样式表所需要的话。但是,利用CSS3中包括的@font-face特性,甚至可以对在线放置的内容发挥更大的设计能力。

简而言之,@font-face特性允许在HTML5标记中定义要使用的字体,使得无论用户是否在他们的计算机上安装了那些字体(并且很有可能用户没有在他们自己的计算机上安装你所选的奇特字体),都会显示出它们。字体的定义可以是本地的(对于你的Web服务器而言,如果你在意在那里包括字体文件的话),或者是远程的(可以链接到许多字体存储的位置)。

在样式表中,要定义在整个页面中使用的新字体,可以简单地使用下面的结构:

@font-face {
   font-family: 'some_name_goes_here';
   src: url('some_location_of_the_font_file');
}

在定义它之后,可以在样式表中的其他任何位置引用font-family,如下所示:

h1 {
   font-family:some_name_goes_here;
   font-size:28px;
   text-align:center;
}

但是,你可能会问,从哪里获得字体呢?可以从许多位置获得字体—有一些字体是免费的,其他字体则不然。一个广泛流行的位置是Google Web Fonts,这不仅是因为这里的字体是免费的,而且因为Google被广泛认可为提供了一个稳定的平台,如果你的Web排版样式依赖于驻留在别人的Web服务器上的字体,这就很重要。其他一些用于获得字体的可靠的付费站点是TypeKit和Fontspring。付费站点不一定很糟糕,艺术家们也必须挣钱。我在TypeKit上进行了个人订购,并且对它们的服务非常满意,但是我也把Google Web Fonts用于许多项目。

让我们试着修改程序清单6.3中的代码,包括进一种Google Web Font字体,用于h1元素。如果转到 http://www.google.com/fonts ,并选择一种你喜欢的字体,Google提供了要在HTML和CSS中包括的代码。我选择了一种名为Cherry Swash的字体,Google建议我在自己的HTML模板中的< head >区域中包括以下代码:

<link href='http://fonts.googleapis.com/css?family=Cherry+Swash:400,700'
   rel='stylesheet' type='text/css' />

注意:

如果查看前面的链接位置,可以看到Google的@font-face定义已经为我们完成了。确切地讲,其定义如下:

@font-face {
 font-family: 'Cherry Swash';
 font-style: normal;
 font-weight: 400;
 src: local('CherrySwash'), local('CherrySwashRegular'), url(http://themes.
 googleusercontent.com/static/fonts/cherryswash/v1/HqOk7J1TZ5i3LejF0vnhCUOGz
 7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
 font-family: 'Cherry Swash';
 font-style: normal;
 font-weight: 700;
 src: local('Cherry SwashBold'), local('CherrySwashBold'), url(http://themes.
 googleusercontent.com/static/fonts/cherryswash/v1/CfyMyQqfucZPQNB0nvYyHl4twX
 kwp3_u9ZoePkT564.woff)
format('woff');
}

既然我的代码知道在哪里寻找字体,我们就只需引用它即可:

h1 {
  font-family:'Cherry Swash';
  font-size:28px;
  text-align:center;
}

图6.4显示了使用Web字体的新简历。


f36ce85bfd64f7a6fe12396a33b5d69b9326fda9

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
经典网页设计:20个与众不同的国外 HTML5 网站
  大家都都知道, HTML5 具备所有最新的技术和功能,帮助我们创造平滑过渡,花式图像滑块和动画。如果你正在考虑使用HTML5 来设计自己的网站,那么这个集合能够帮助你。   在过去的10年里,网页设计师使用 Flash、JavaScript 或其他难用的软件创建网站。
594 0
基于HTML5/CSS/JS响应式圣诞老人过悬崖小游戏
基于HTML5/CSS/JS响应式圣诞老人过悬崖小游戏
0 0
HTML+CSS(HTML5+CSS3)项目案例(公共部分common)-1
HTML+CSS(HTML5+CSS3)项目案例(公共部分common)
0 0
HTML+CSS(HTML5+CSS3)项目案例(公共部分common)-2
HTML+CSS(HTML5+CSS3)项目案例(公共部分common)
0 0
Python Html5和CSS3的新增功能:CSS权重与CSS3新增选择器
Python Html5和CSS3的新增功能:CSS权重与CSS3新增选择器
0 0
web前端学习(五)——HTML5中设置简单的CSS样式(选择器、内联样式、内部样式表及外部样式表)
web前端学习(五)——HTML5中设置简单的CSS样式(选择器、内联样式、内部样式表及外部样式表)
0 0
web前端学习(六)——HTML5中通过CSS设置超链接及鼠标形状
web前端学习(六)——HTML5中通过CSS设置超链接及鼠标形状
0 0
_HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)
_HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)
0 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
WEB浏览器中即将发生的安全变化
立即下载
PWA:移动Web的现在与未来
立即下载
从Web到Cloud App——YunOS Web App 开发经验分享
立即下载