《HTML5+CSS3网页设计入门必读》——第6章 处理字体6.1 处理特殊字符

简介:

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

第6章 处理字体

在本章中你将学到:

  • 怎样使用特殊字符;
  • 怎样使用粗体字、斜体和特殊文本格式化效果;
  • 怎样使用文本效果;
  • 怎样调整字体;
  • 怎样使用Web字体。

在Web的早期时代,只以一种字体和一种大小显示文本,但是那些日子已经一去不复返了。HTML与CSS的组合使得有可能控制文本外观的所有方面。在本章中,你将学习如何更改字体的视觉显示(它的字体系列、大小和粗细),以及如何把粗体字、斜体字、上标、下标和加删除线的文本纳入到页面中。你还将学习如何更改字形和字体大小。

Try It Yourself:准备示例文本

如果你具有一些可以显示不同字体和颜色并且可以缩进、居中显示或者执行其他操作的示例文本,那么在这一整章中,就可以最大限度地学习如何编排文本样式。它实际上与你将使用的文本类型无关,因为你具有如此多种不同的样式可能性要尝试,以至于它们无论如何都永远不会同时出现在相同的Web页面上(除非你想使访问者陷入疯狂之中)。利用这个机会,感受一下文本级改变可能如何影响内容的外观。

  • 如果你将使用的文本来自字处理或数据库程序,一定要把它以纯文本或ASCII格式保存到一个新文件中。然后在学习本书的过程中可以添加合适的HTML标签和样式属性来格式化它。*
  • 任何文本都可以,但是要尽量找到(或输入)一些你想放到Web页面上的文本。公司宣传册或者你的简历中的文本可能是一个好的选择。
  • 任何类型的大纲、演示文稿中的项目编号要点、带编号的步骤、术语表或者数据库中的文本信息的列表都是可以处理的良好材料。
  • 在使用本章中介绍的代码格式化正文文本之前,要添加在前面各章中使用的HTML基本标签集(至少要使用、、

6.1 处理特殊字符

在我们急匆匆地介绍字体改变之前,先让我们简要讨论一下字体内的特殊字符。大多数字体都包括用于欧洲语言的特殊字符,比如Café中的重音“é”。你还将发现少量的数学符号和特殊的标点符号,比如圆形项目符号(图像说明文字)。

注意:
在查看其他设计师的Web内容时,你可能注意到其中标记文本的方法不同于本书中讲述的那些方法。一些格式化文本的老方法包括:使用< b >< /b >标签对来指示何时应该对单词进行加粗,使用< i >< /i >标签对指示何时应该以斜体格式显示单词,以及使用< font >< /font >标签对指定字体系列、大小和其他属性。不过,这种方法将被HTML逐步淘汰,并且CSS要强大得多。
在HTML文档中,可以使用如表6.1所示的合适代码在任何位置插入这些特殊字符


<a href=https://yqfile.alicdn.com/3a102cb3dd2858105826767b3d14feb704039995.png" >


0a23d089314c93b0e79aa13776608751c6464b58


<a href=https://yqfile.alicdn.com/30da74cae708a52cbb5e86b51e6af1ae282545e6.png" >

例如,可以使用以下任何一种方法创建单词“café”:

caf&eacute;
caf&#233;

提示:

你正在寻找版权(©)和注册商标(®)符号吗?它们的代码分别是©和®。要创建未注册的商标(™)符号,可以使用™。
尽管可以通过数字指定字符实体,每个符号还具有一个助记名称,它们通常更容易记住。

HTML使用称为字符实体(character entity)的特殊代码来表示诸如©和®之类的特殊字符。字符实体的指定总是开始于“&”,并且结束于“;”。表6.1列出了最常用的字符实体,尽管HTML支持的字符实体要多得多。

表6.1包括用于尖括号、引号以及“与”符号的代码。如果希望这些符号出现在页面上,就必须使用那些代码;否则,Web浏览器将把它们解释为HTML命令。

程序清单6.1和图6.1显示了表6.1中的几个符号的实际应用。

程序清单6.1 特殊字符代码

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Punctuation Lines</title>
  <style type="text/css">
  section {
   margin-bottom: 20px;
  }
  </style>
 </head>
 <body>
  <section>
   Q: What should you do when a British banker picks a fight
   with you?<br />
   A: &pound; some &cent;&cent; into him.
  </section>
  <section>
   Q: What do you call it when a judge takes part of a law
   off the books?<br />
   A: &sect; violence.
  </section>
  <section>
   Q: What did the football coach get from the locker room
   vending machine in the middle of the game?<br />
   A: A &frac14; back at &frac12; time.
  </section>
  <section>
   Q: How hot did it get when the police detective interrogated
   the mathematician?<br />
   A: x&sup3;&deg;
  </section>
  <section>
   Q: What does a punctilious plagiarist do?<br />
   A: &copy;
  </section>
 </body>
</html>


<a href=https://yqfile.alicdn.com/537cf5263af72e546eadc2bf870934459bb53f40.png" >
相关文章
|
4天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
15 0
HTML5/CSS3粒子效果进度条代码
|
8天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
22 1
|
13天前
|
前端开发 开发者 UED
【专栏:HTML与CSS前端技术趋势篇】网页设计中的CSS Grid与Flexbox之争
【4月更文挑战第30天】本文对比了CSS Grid和Flexbox两种布局工具。Flexbox擅长一维布局,简单易用,适合导航栏和列表;CSS Grid则适用于二维布局,能创建复杂结构,适用于整个页面布局。两者各有优势,在响应式设计中都占有一席之地。随着Web标准发展,它们的结合使用将成为趋势,开发者需掌握两者以应对多样化需求。
|
13天前
|
移动开发 前端开发 JavaScript
【专栏:HTML与CSS实战项目篇】使用HTML5与CSS3制作一个动态表单验证页面
【4月更文挑战第30天】本文介绍了使用HTML5和CSS3创建动态表单验证页面的方法。首先,简述HTML5用于构建网页内容,CSS3用于描述样式。接着,分四步展示实现过程:1) 设计包含输入框和提示信息的表单结构;2) 使用CSS3创建样式,增强视觉效果;3) 使用JavaScript监听输入事件,动态验证表单并显示错误信息;4) 测试和调试确保跨平台兼容性。通过学习,开发者能掌握创建带验证功能的表单,提升用户体验。
|
13天前
|
编解码 前端开发 数据挖掘
【专栏:HTML 与 CSS 移动端开发篇】移动优先的网页设计理念
【4月更文挑战第30天】本文探讨了移动优先的网页设计在HTML和CSS移动端开发中的重要性。随着移动设备普及,移动优先设计理念旨在首先满足移动端用户需求,提供良好体验。通过响应式设计、简洁布局、优化资源和触摸友好交互,确保网站在移动设备上的表现。实施步骤包括分析用户需求、设计原型、编写代码和测试优化。注意避免过度设计,保持一致性,关注性能,并适应不同平台。移动优先设计是提升用户体验和竞争力的关键,随着技术发展,这一理念将持续演进。
|
13天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
13天前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 入门:给网页添加样式
【4月更文挑战第30天】CSS是网页设计的关键,用于控制网页样式和布局。它通过选择器(如元素、类和ID)来设定颜色、字体、对齐、背景等属性。CSS可内嵌、外部引用或行内设置。布局技巧包括浮动、定位和弹性盒子。响应式设计利用媒体查询适应不同设备。不断实践和学习CSS,能提升网页的吸引力和用户体验。一起探索CSS的魅力吧!
|
14天前
|
前端开发 开发者
在HTML中,可以使用字符实体`&copy;`来显示版权符号
【4月更文挑战第30天】在HTML中,可以使用字符实体`&copy;`来显示版权符号
18 2
|
14天前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
18天前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
28 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)