《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
相关文章
|
2月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
140 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
5月前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
2月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
61 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
5月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
2月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
68 34
|
5月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
3月前
|
Web App开发 前端开发
【CSS】——基础入门常见操作
CSS引入,CSS对元素美化,style修饰,选择器(标签选择器,类选择器,ID选择器,复合选择器),font-size , boder ,width,height,margin,paddiing
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
72 6
|
4月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
65 5
|
4月前
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用,介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论,旨在帮助开发者更好地理解和运用媒体查询,提升移动端用户体验。
85 4