字体

介绍

字体是“类型面”的样式,用于显示文本,数字,字符和其他“字形”,因为它们通常在排版行业中被称为排版是指文本的排列和外观排版不仅涉及字形的外观,还涉及它们如何放置在页面上(页边距,段落或线条之间的空白空间量,文本的对齐方式等)控制字体和其他印刷样式的最有效方法是使用层叠样式表(CSS)。

重要

在字体可访问性方面,要记住以下几个原则:

  1. 在图形中使用真实文本而不是文本。
  2. 选择基本,简单,易读的字体。
  3. 使用有限数量的字体。
  4. 确保文本和背景之间有足够的对比度。
  5. 避免使用小字体。
  6. 使用相对单位的字体大小。
  7. 限制使用字体变体,例如胆大斜体和所有大写字母。
  8. 不要只依赖字体的外观(颜色,形状,字体变化,位置等)来传达意义。
  9. 避免闪烁或移动文本。

真实文本vs.图形内的文字

可以通过屏幕阅读器中的语音合成器将文本转换为声音文本也可以通过屏幕放大或放大软件放大,而不会有任何质量损失这些是文本格式内容对可访问性如此重要的两个主要原因Although it is possible to provide alternative text for graphics, it is not possible to enlarge text in most graphics without some loss of quality (unless the graphic is vector-based, such as Scaleable Vector Graphics [SVG] or Flash, but this introduces a different set of potential accessibility problems).

“大学”这个词的像素化图像,难以阅读

上面“大学”一词的放大图像很难阅读,因为它已经变得像素化了。

In addition to readability of text within images, using real text instead of text within images provides many other benefits, such as lower bandwidth requirements, easier translation to other languages, better search engine optimizations, etc.

字体可读性

最佳做法是使用最易读的字体不幸的是,这说起来容易做起来难专家并不总是同意哪种字体最易读,哪种字最适合网络使用有可能在网站上使用的数千种字体和字体变体,特别是支持字体嵌入(一种使自定义字体定义用于Web内容的技术)但是,现代操作系统中有许多本机可用的字体:

  • 宋体
  • 预订Antiqua
  • 漫画Sans MS
  • 格鲁吉亚
  • 快递新
  • 宋体
  • 英语字体格式一种
  • 投石机MS
  • 宋体
  • 等等

通常最好使用最终用户设备上可用的标准字体请记住,只有一个或只有几个字体的文档通常更容易阅读使用太多字体可能会产生令人困惑的视觉布局,这对所有用户都不利,但对于患有阅读障碍,学习障碍或注意力缺陷障碍的用户来说可能特别困难。

字体系列

字体根据其特征分为“家庭”最常见的字体系列是

  • 衬线
  • 无衬线字体
  • 草书
  • 幻想
  • 等宽

从这些中,serif和sans-serif字体是迄今为止最常见的字体。

衬线字体

衬线字体的特征是在f,l和i等字母的尖端上有喇叭形的扩展或笔划,如下面的屏幕截图所示:

衬线字体通常也有粗细笔划的组合,如上面字母“f”的曲线所示。

衬线字体的示例包括Times New Roman,Georgia和Book Antiqua。

无衬线字体

Sans-serif字体具有简单的结尾,并且比serif字体看起来更加笨拙它们没有喇叭形的延伸,笔划或其他类型的装饰(“Sans”的意思是,“serif”是指额外的, 要么线。)

Sans-serif字体包括Arial,Tahoma,Trebuchet MS和Verdana。

草书字体

草书字体类似于手写笔或笔触,通常具有艺术装饰,并且有时具有将字母连接在一起的笔划。

因为草书字体通常更难以阅读,所以它们在可用性或可访问性方面通常是不好的选择,至少在文本的简短装饰部分之外草书字体的另一个问题是它们在用户的计算机上不太常见,因此结果可能与设计者的意图明显不同(除非使用字体嵌入)。

幻想字体

幻想字体主要是装饰性的,并不能用作长文本的主要字体Fantasy fonts vary wildly in their appearance and artistic content除了装饰性之外,没有任何元素或特征可以对幻想字体进行分类。

与草书字体一样,幻想字体在用户计算机的可读性和可用性方面通常是Web内容的不良选择。

幻想字体非常具有艺术性,装饰性,并且彼此非常不同。

等宽字体

Monospace字体的名称取决于每个字母占用相同宽度的空间甚至可能看起来需要不同宽度的字母,例如大写字母“W”和小写字母“i”在等宽字体中占用相同的宽度即使单词之间的空白空间与所有字母本身的宽度相同。

常见的等宽字体是Courier和Courier New这两种字体都具有旧打字机字体的外观,并且通常用于显示计算机代码,HTML标记和其他技术内容。

指定字体系列

为了解释并非所有计算机都安装了相同的字体,开发人员应指定一系列浏览器可用于呈现文本的字体最好的方法是使用层叠样式表(CSS)使用CSS,开发人员首先指定首选字体,然后指定可用作替代字体的其他字体,以及列表末尾的字体系列名称。

CSS指定了许多字体或族。

身体
{
font-family:Helvetica,Arial,sans-serif;
}
H1
{
font-family:Georgia,Times,“Times New Roman”,serif;
}

在上面的每个样式中,浏览器将应用计算机上安装的列表中的第一个字体如果安装了列表中的第一个字体,计算机将应用它如果没有,它将尝试应用列表中的第二个,然后是第三个,依此类推,直到到达字体列表的末尾,此时它将应用浏览器默认字体(通常为Times New Roman)。

字体嵌入

现代浏览器允许字体嵌入,这种技术允许浏览器下载非标准字体的字体定义,然后在这些字体中显示文本虽然大多数系统级字体都是为某种程度的可读性而设计的,但许多自定义设计的字体却没有应注意使用保持高可读性的字体只要更改字体外观对屏幕阅读器或其他类型的可访问性没有影响,只要实际的底层文本以万维网形式维护即可。

专为屏幕观看而设计的字体

虽然像Times和Times New Roman这样的衬线字体通常被认为是印刷文本中最易读的字体系列,但是有关哪种字体最适合基于网络的内容的信息存在冲突传统观点认为,无衬线字体更适合电子格式,但这种惯例可能源于这样一个事实:较旧的计算机屏幕不能渲染衬线字体大多数现代计算机显示器能够显示所有类型的字体,其清晰度几乎与打印页面一样清晰最近的研究导致调查结果不一致,因此很难说哪种字体系列最适合网络。

一些字体,如Verdana,Tahoma,Trebuchet MS和Georgia,专门用于电子媒体,现在已经非常常用。

宋体

Verdana是最受欢迎的用于屏幕观看的字体之一它有一个简单,直接的设计,字符或字形不容易混淆例如,大写字母“I”和小写字母“L”具有独特的形状,与Arial不同,其中两个字形可能容易混淆。

Verdana的另一个优点是字母之间的间距One consideration to take into account with Verdana is that it is a relatively large font即使在相同的点大小,单词占用的空间也比Arial中的单词多。

较大的尺寸提高了可读性,但也有可能破坏精心规划的页面布局这不是开发人员设计的问题,而是考虑到灵活性(参见下面的部分字体大小。)

宋体

Tahoma是Arial / Helvetica字体的另一种替代品。

注意

Helvetica和Arial几乎完全相同,但差异很小Helvetica是原始字体,Arial后来开发并且变得更加普及(即使在印刷工作者中不那么受欢迎),主要是因为Arial包含了Windows操作系统。

Tahoma比Arial稍大,但比Verdana小Tahoma中字母之间的间距比Arial或Verdana更紧密,给人一种“揉在一起”的外观,特别是与Verdana相比时,特别是当用于长篇文本时可以使用CSS修改字母之间的间距,但是Tahoma中的字形仍然具有高而窄的质量,当字母间距增加时,这会给出一些奇怪的整体外观Tahoma仍然是一种可接受的字体,但对于长文本来说,整体上可能比Verdana或Arial / Helvetica更不易读。

投石机MS

Trebuchet是一种极具吸引力的字体,但它具有微妙的曲线装饰,可能会降低长篇文本的整体可读性The curve at the bottom of the lower-case "L" helps to distinguish the "L" from the upper-case "I," but when the "I" is viewed out of context, it looks like it could be a lower-case "L." Some of the glyphs are also presented in a non-standard, more decorative format, such as the ampersand (),这也可能降低可读性。

这仍然是一种相当流行的网络字体,因为它“有一些风格”,可以这么说它是独一无二的,具有艺术感,但在大多数情况下仍然可读在可访问性方面,它比某些字体更好,但不如其他字体好。

格鲁吉亚

格鲁吉亚就像到目前为止讨论的其他网络字体一样,它比用于印刷设计的类似字体更宽与其他网络字体不同,格鲁吉亚是一种衬线字体,更像是Times New Roman。

Georgia is somewhat easier on the eyes than Times New Roman, although high resolution screens with font smoothing technology also display Times New Roman quite well使用Georgia的一个优点是它不是浏览器的默认文本当指定了默认字体以外的字体时,用户更容易看到设计者已将某些样式应用于字体格鲁吉亚最终看起来比Times New Roman更具艺术性,尽管CSS造型当然也能为Times New Roman注入新的活力。

字体数量

使用有限数量字体的想法并非特定于残疾问题,并且不是可访问性问题本身但是,这是一个很好的准则,遵循印刷术语使用太多字体会使文档混乱并使其更加混乱不超过2或3个字体的文档看起来更有条理,更精简,更连贯。

字体变体

大胆和斜体

HTML中的两个元素创建一个粗体文本外观<B>元素和的<strong>元件该<B>元素没有语义含义该的<strong>element means "strong emphasis." If the purpose in using bold text is to emphasize content or give its meaning importance, the的<strong>元素是合适的如果目的是简单地呈现更胖的文本,那么<B>这是合适的,因为这纯粹是化妆品或风格通常,应使用CSS定义纯粹的风格更改使用CSS创建粗体文本的样式是字体重量:粗体

同样的,<I>(斜体)和<EM>(重点)也被使用该<I>元素(如<B>)纯粹风格,也可以使用CSS呈现font-style:italic,而<EM>提出语义强调,应该用来给文本内容增加额外的重要性或重点。

大写

在所有资本中输入句子或短语很少是一个好主意在某些情况下它可能有意义,但很少冗长的大写内容部分更难以阅读它们也可能给人一种作者大喊大叫的印象如果作者确实想传达一个喊叫,感叹号和/或使用<EM>要么的<strong>可能更好。

屏幕阅读器通常不会以不同的方式阅读文本,因为听众不会知道作者强调文本但是,屏幕阅读器可能会用感叹号改变声音变化,<EM>, 要么的<strong>

在某些情况下,屏幕阅读器可能会将所有资本文本解释为首字母缩略词,并且可能将其视为字母而不是字词例如,屏幕阅读器可以将大写文本CONTACT US读作“Contact U”S.“因为它将大写”美国“解释为”美国“的首字母缩写词。

对比

当文本和背景之间有足够的对比度时,文本更容易阅读白色背景上的黑色文字是印刷品和网络的事实标准但是,这种组合并不适合所有用户视力极低的用户可以将背景设置为黑色,将文本设置为白色或黄色患有阅读障碍的用户可以将背景设置为灰白色或浅黄色,带有黑色文本一些患有阅读障碍的人在屏幕上放置一块透明的有色塑料片,以便更有效地阅读Web开发人员无法控制这些用户行为,他们也不必这样做用户将做他们需要做的事情,以及他们习惯做的事情,以便阅读Web开发人员主要关注的是确保一般读者群体的高度对比。

黑色的黄色是很好的对比。

黑色白色是很好的对比。

黑色的栗色是鲜明的对比。

红色的绿色是不好的对比。

网页内容可访问性指南定义一个公式,用于确定前景和背景之间是否有足够的对比度工具如WebAIM的颜色对比度检查器可以轻松检查对比度阈值并确定WCAG合规性。

字体大小

Should you specify a font size other than the default font size? This question is one of many design questions that is best answered by saying "it depends." Designers have a wide range of control over font size with CSS一些设计师认为默认字体太大对某些用户来说,也许是这样对于其他用户,它可能仍然太小不可能为所有受众创建完美的字体大小。

幸运的是,大多数浏览器允许用户根据自己的喜好放大或缩小字体大小视力不佳的用户通常会改变浏览器的设置以满足他们的需求一些用户使用屏幕放大软件来完成此任务在许多方面,由于浏览器和辅助技术的可定制性增加,字体大小不像以前那么重要但是,您的设计必须适应增加的文本大小而不会降低可读性或功能。

相对单位vs.绝对单位

出于开发目的,最好使用相对单位(例如百分比或ems)来指定字体大小而不是绝对单位(例如像素或点)这为使用CSS修改可视化表示提供了很大的灵活性对于可访问性,因为现代浏览器无论大小如何定义都足以调整文本大小,因此以相对大小定义文本大小并不重要。