2025-05-16
在网站设计中，字体（Typography）是用户体验和品牌传达的核心要素之一。印刷字体是静态的，而网页字体却是油滑可塑的。规划师有必要预测跨浏览器及终端用户的终究成果，而不仅限于学习怎么完成某种特定的视觉外观。除了把握简略的规矩以外，他们相同要了解背后的原因。
印刷字体是静态的，而网页字体却是油滑可塑的。规划师有必要预测跨浏览器及终端用户的终究成果，而不仅限于学习怎么完成某种特定的视觉外观。除了把握简略的规矩以外，他们相同要了解背后的原因。
第一要务是查看将运用的字体终究能做什么。根本上一切字体的用处都是相似的，但有些字体比其它愈加适宜。Unicode编码的字体供给了成千上万种字形的或许性，而OpenType字体格局则支撑更多的功用，例如小号大写字母，老式风格数字，自在连字以及上下文替换等。
但是，字体的质量取决于字体规划师的发明水准。假如规划者忽视了绘制一切有必要的字符，或许忘记了创立相关的功用，那么排版的细节问题也就变得意义不大了。发明专业字体需求大量的时间和精力，而有些规划师并未做好充足的预备。
因而，在将字体纳入页面规划前，查看其字符集和功用的作业就变得举足轻重。字体就像东西箱，有些时分东西箱几乎是空的，用处有限，就像字体只有大写、小写、数字和一些根本拼写相同；有些时分短少的却是某些关键东西，假如有一把螺丝刀，一把锯但却没有锤子的话，一些钉东西的活就难以完成。
FF Sero by Jörg Hemker
“字体回滚”（Font Fallbacks）是以单个字符为基准发生的。一旦字符在指定的字体中丢掉，回滚体系就会主动从列表中的下一个字体调用这个字符，然后切换回原来的字体。灵敏利用这项特性能够到达惊人的作用。举例来说，字体的字符集不具有老式风格的数字，那么能够找到具有对应数字的字体；删减该字体，只留下所需数字，将其放入回滚列表。文本中的一切数字就会以老式风格的方法呈现，而其余部分将会以正常字体显现。这能够使你不用对数字进行别离格局化，也摆脱了页面中多余的HTML标签。
许多专业级的字体都具有几个不同的数字字符集。每个字符集都有它特别的用处。表格局数字占据相同的空间，让它们笔直摆放，而宽度比例数字与其规划相符– 举例来说，数字4要比1宽得多。一方面，老式风格数字的规划模仿了带X高度属性，上行和下行字母的的小写字符，使其与巨细写混合的文本完美融合。另一方面，内衬的数字用于数值，或与大写文本一同运用。
FF Ernestine by Nina Stoessinger
CSS使你能够假造一些工作。假如字体自身没有粗体的变体，标签能够经过两层渲染+略微侧移的方法将文本人为地加粗。为没有斜体款式的字体加上标签能够完成斜体作用。由此发生的扭曲字符令人不忍目睹。
更重要的是防止运用和标签，而用和取而代之。前者只触及字体的外观，也就是所谓的Bold和Italic. 但或许你只想经过改动颜色和巨细的方法着重文本。所以清晰你的目的就变得重要了– 加粗字符，抑或着重内容？运用后者赋予你经过CSS文件轻松改动文本外观的自在。一般来说，在CSS文件里界说一切的文本款式，尽或许防止部分款式界说。
当字符集傍边短少小号大写字母时，假造它们总会使其相较周围字体过于单薄。假使字体款式有一个半粗体的变体，或普通和粗体的粗细程度相差无几，那么能够运用更粗的那个来调节文本的明暗程度。别忘了给小号大写字母一点额定的字符空间。
有时分你会在页面中本应是重音或其它特别字符的地方发现难以辨认的字符。当从文本编辑软件中仿制非UTF-8编码的文本时会发生这种状况。字符编码体系将一切的字形映射至给定的字符集，以便利经过网络或存储介质传输数据(主要是文本或数字)。
虽然HTML能够兼容UTF-8，但它会误解从其它任意编码体系中直接仿制的文本，将特别字符变为随机字母和符号的古怪组合。此外某些内容管理体系在仿制文本的一起也会同时仿制格局，形成不行预知的结果。要防止这种问题，好的办法是运用简易文本编辑器将仿制的内容转换为纯文字的格局，然后从那里仿制并粘贴到CMS傍边。
FF Spinoza by Max Phillips
看看你的键盘– 你或许没有意识到可用的字符是多么丰富。它们傍边的许多是被HTML实体界说的，所以熟记常用的实体是必要的– 便于页面大局排版。你不能直接运用小写的x替代乘法符号，商标符号不仅仅是一个简略的大写T和大写M，起浮的重音符也不能替代引号。
说到撇号，正确的方法应该是闭合单引号。一个凸显出不成熟的例子是直引号的运用，它一起也被注重方法的规划师称为‘哑巴引号’。但是，运用适宜的卷曲单引号或双引号是不行的。不同的言语有不同的引号运用方法。举例来说，法语运用的引号是指向外侧的三角标识符，而在德语中引号的方向则指向外侧。
连字符用来连接邻接的词语，或用于长单词跨行，以及其它用处。有两种其它的水平破折号：en破折号一般为em破折号的一半长度。通常状况下咱们用它来指示数值的闭合规模，表明负数，或许阐述两件工作之间的联络。em破折号一般和字体等宽，而且一般用于划定某种想法的中止，形成嵌入句子中的独立实体。但其详细用法常常引发争论。有些人用em破折号替代en，虽然两者都应该在没有邻接空白的状况下运用，许多字体规划者宁愿参加纤细的空白来防止它们触碰邻接的字符。
Web文本的大优势之一就是它能够被用户调整。假如字体是基于像素界说的，缩放一个页面或许会引起不同文本款式间的相对巨细差异，举例来说，正文字号或许会大过标题字号。用相关于规范正文字号的em来界说一切文本是非常关键的。这保证了网页中的一切文本均可发生对应的调整，尊重不同文本字号间的联系。
FF Spinoza by Max Phillips
缩放浏览器窗口会使文本框变得宽阔或拥堵，而终端用户也能够改动字体巨细。这或许令你觉得换行是难以掌控的。但当你对期望到达的终究作用有一个完全的了解今后，某些特定方面是能够操控的。
换行呈现在被p或div标签环绕段落的结束。在其它状况下，很少有期望下个单词能从新一行开始而插入换行的做法，因而请慎重运用
标签。常见的原因是要将2个或多个单词放在一同。不间断式空格能够保证邻接单词永远处在同一行。惋惜的是不间断式连字符尚未被界说为HTML字符实体。别的，软连字符或自在裁量连字符只应在必要时呈现，当文本列过于拥堵，期望分割开超长单词时，它们就可派上用场。
非间断空格(nbsp)并非HTML中可用的唯一一种空格字符。全角空格(em space)和字体等宽，能够形成一个完美的方形分隔符。半角空格(en space)的宽度是它的1/2。表格局文本傍边有用的是数字式空格(figure space)，和字体中的数字占据相同巨细的空间；而标点式空格(punctuation space)与点、逗号的宽度持平；薄空格(thin space)能够在人名缩写中的点和下一个字母之间运用，而发丝式空格(hair space)能够将长破折号与相邻的字符分开。还有3倍、4倍、6倍于每全角宽度的空格…
关于阅读体验而言，字符之间与内部的距离与字符自身同样重要。正确的层次结构是字距<词距<行距。应防止在字母之间添加空格，这会令单词离隔并影响可读性。增加字距只能保证对字号很小的文本发生影响。与之相对的是显现尺度常常受益于严密的摆放，但同样要适度。
涣散对齐会对文本的外观发生不利的影响。在对齐文本使之适应行宽的时，词距被扩大，犬牙交错的空白涣散在文本行傍边。这令文本的外观变得不均衡，某些文本行中甚至会发生丑陋的间隔。左对齐/右未对是更易于阅读的摆放方法。
除了字距和词距以外，行距相同会影响可读性。过于拥堵的文本行会令文本变得不易分辨。不和来看，假如行距过宽，关于读者而言，准确找到每个换行之后的下一行将会感到困难。
这些小贴士现已能够帮你发明出愈加精密的网页字体作用，但需求学习的东西仍然许多。当你对字体准则了解愈加深化，更有自信地运用它们时，你就会理解怎么去尝试并拓宽自己的视野。这方面的一本权威教程是刚刚发行不久的Inside Paragraphs: Typographic Fundamentals，作者为Cyrus Highsmith. 这本宝典和Robert Bringhurst的基础教程The Elements of Typographic Style，或 Erik Spiekermann 和 E.M. Ginger’s所著的Stop Stealing Sheep & Find Out How Type Works是绝配。最终记得在多设备实机测试效果！
