网站的关键!教你13步打造漂亮的WEB字体

news/2024/5/9 20:33:41/文章来源:https://blog.csdn.net/u012598110/article/details/49300251

今天,大多数浏览器已经默认支持Web字体,日趋增多的字体特性被嵌入最新版HTML和CSS标准中,Web字体即将迎来一个趋于复杂的崭新时代。这意味着网页设计师需要重新审视经典的字体规则——而这并非故事的结束。


印刷字体是静态的,而网页字体却是圆滑可塑的。设计师必须预测跨浏览器及终端用户的最终结果,而不仅限于学习如何实现某种特定的视觉外观。除了掌握简单的规则以外,他们一样要理解背后的原因。


下面是一些基本的关于字体的规则,特别适用于Web字体:


01. 了解字体的用途


第一要务是检查将使用的字体究竟能做什么。基本上所有字体的用途都是相似的,但有些字体比其它更加合适。Unicode编码的字体提供了成千上万种字形的可能性,而OpenType字体格式则支持更多的功能,例如小号大写字母,旧式风格数字,自由连字以及上下文交替等。


然而,字体的质量取决于字体设计师的创造水准。如果设计者忽视了绘制所有必须的字符,或者忘记了创建相关的功能,那么排版的细节问题也就变得意义不大了。创造专业字体需要大量的时间和精力,而有些设计师并未做好充足的准备。


因此,在将字体纳入页面设计前,检查其字符集和功能的工作就变得举足轻重。字体就像工具箱,有些时候工具箱几乎是空的,用途有限,就像字体只有大写、小写、数字和一些基本拼写一样;有些时候缺少的却是某些关键工具,如果有一把螺丝刀,一把锯但却没有锤子的话,一些钉东西的活就难以完成。


02. 巧妙的子集


FF Sero by Jörg Hemker


“字体回滚”(Font Fallbacks)是以单个字符为基准发生的。一旦字符在指定的字体中丢失,回滚系统就会自动从列表中的下一个字体调用这个字符,然后切换回原来的字体。灵活利用这项特性可以达到惊人的效果。举例来说,字体的字符集不具有旧式风格的数字,那么可以找到具有对应数字的字体;删减该字体,只留下所需数字,将其放入回滚列表。文本中的所有数字就会以旧式风格的方式呈现,而其余部分将会以正常字体显示。这可以使你不必对数字进行分别格式化,也摆脱了页面中多余的HTML标签。


03. 弄懂数字


很多专业级的字体都具有几个不同的数字字符集。每个字符集都有它特殊的用途。表格式数字占据相同的空间,让它们垂直排列,而宽度比例数字与其设计相符– 举例来说,数字4要比1宽得多。一方面,旧式风格数字的设计模仿了带X高度属性,上行和下行字母的的小写字符,使其与大小写混合的文本完美融合。另一方面,内衬的数字用于数值,或与大写文本一起使用。


04. 切勿伪造字体


FF Ernestine by Nina Stoessinger


CSS使你可以伪造一些事情。如果字体本身没有粗体的变体,<b>标签可以通过双重渲染+略微侧移的方式将文本人为地加粗。为没有斜体样式的字体加上<i>标签可以实现斜体效果。由此产生的扭曲字符令人惨不忍睹。


更重要的是避免使用<b>和<i>标签,而用<strong>和<em>取而代之。前者只涉及字体的外观,也就是所谓的Bold和Italic. 但或许你只想通过改变颜色和大小的方式强调文本。所以明确你的目的就变得重要了– 加粗字符,抑或强调内容?使用后者赋予你通过CSS文件轻松改变文本外观的自由。一般来说,在CSS文件里定义所有的文本样式,尽可能避免局部样式定义。


05. 但如果你必须伪造的话,逼真些


当字符集当中缺少小号大写字母时,伪造它们总会使其相较周围字体过于单薄。倘若字体样式有一个半粗体的变体,或普通和粗体的粗细程度相差无几,那么可以使用更粗的那个来调节文本的明暗程度。别忘了给小号大写字母一点额外的字符空间。


06. 谨慎使用复制粘贴


有时候你会在页面中本应是重音或其它特殊字符的地方发现难以辨认的字符。当从文本编辑软件中复制非UTF-8编码的文本时会产生这种情况。字符编码系统将所有的字形映射至给定的字符集,以方便通过网络或存储介质传输数据(主要是文本或数字)。


尽管HTML可以兼容UTF-8,但它会曲解从其它任意编码系统中直接复制的文本,将特殊字符变为随机字母和符号的奇怪组合。此外某些内容管理系统在复制文本的同时也会一并复制格式,造成不可预知的后果。要避免这种问题,最好的办法是使用简易文本编辑器将复制的内容转换为纯文字的格式,而后从那里复制并粘贴到CMS当中。


07. 学习HTML实体


FF Spinoza by Max Phillips


看看你的键盘– 你可能没有意识到可用的字符是多么丰富。它们当中的很多是被HTML实体定义的,所以熟记常用的实体是必要的– 便于页面全局排版。你不能直接使用小写的x代替乘法符号,商标符号不仅仅是一个简单的大写T和大写M,浮动的重音符也不能代替引号。


08. 正确的引用


说到撇号,正确的形式应该是闭合单引号。一个凸显出不成熟的例子是直引号的使用,它同时也被注重形式的设计师称为‘哑巴引号’。然而,使用合适的卷曲单引号或双引号是不够的。不同的语言有不同的引号使用形式。举例来说,法语使用的引号是指向外侧的三角标识符,而在德语中引号的方向则指向外侧。


09. 了解破折号


连字符用来连接邻接的词语,或用于长单词跨行,以及其它用途。有两种其它的水平破折号:en破折号一般为em破折号的一半长度。通常情况下我们用它来指示数值的闭合范围,表示负数,或者阐述两件事情之间的联系。em破折号一般和字体等宽,并且一般用于划定某种想法的停顿,形成嵌入句子中的独立实体。但其具体用法常常引发争论。有些人用em破折号代替en,尽管两者都应该在没有邻接空白的情况下使用,很多字体设计者宁愿加入纤细的空白来避免它们触碰邻接的字符。


10. 定义关系,而非绝对尺寸


Web文本的最大优势之一就是它可以被用户调整。如果字体是基于像素定义的,缩放一个页面可能会引起不同文本样式间的相对大小差异,举例来说,正文字号可能会大过标题字号。用相对于标准正文字号的em来定义所有文本是非常关键的。这确保了网页中的所有文本均可产生对应的调整,尊重不同文本字号间的关系。


11. 控制换行


FF Spinoza by Max Phillips


缩放浏览器窗口会使文本框变得宽敞或拥挤,而终端用户也可以改变字体大小。这可能令你觉得换行是难以掌控的。但当你对希望达到的最终效果有一个彻底的理解以后,某些特定方面是可以操控的。


换行出现在被p或div标签环绕段落的结尾。在其它情况下,很少有希望下个单词能从新一行开始而插入换行的做法,因此请谨慎使用<br>标签。最常见的原因是要将2个或多个单词放在一起。不间断式空格可以确保邻接单词永远处在同一行。可惜的是不间断式连字符尚未被定义为HTML字符实体。另外,软连字符或自由裁量连字符只应在必要时出现,当文本列过于拥挤,希望分割开超长单词时,它们就可派上用场。


12. 注意空格


非间断空格(nbsp)并非HTML中可用的唯一一种空格字符。全角空格(em space)和字体等宽,能够形成一个完美的方形分隔符。半角空格(en space)的宽度是它的1/2。表格式文本当中最有用的是数字式空格(figure space),和字体中的数字占据相同大小的空间;而标点式空格(punctuation space)与点、逗号的宽度相等;薄空格(thin space)可以在人名缩写中的点和下一个字母之间使用,而发丝式空格(hair space)可以将长破折号与相邻的字符分开。还有3倍、4倍、6倍于每全角宽度的空格…


对于阅读体验而言,字符之间与内部的间距与字符本身同样重要。正确的层次结构是字距<词距<行距。应避免在字母之间添加空格,这会令单词隔开并影响可读性。增加字距只能保证对字号很小的文本产生影响。与之相对的是显示尺寸常常受益于紧密的排列,但同样要适度。


分散对齐会对文本的外观产生不利的影响。在对齐文本使之适应行宽的时,词距被扩大,长短不一的空白分散在文本行当中。这令文本的外观变得不均衡,某些文本行中甚至会产生难看的间隔。左对齐/右未对是更易于阅读的排列方式。


除了字距和词距以外,行距一样会影响可读性。过于拥挤的文本行会令文本变得不易分辨。反面来看,如果行距过宽,对于读者而言,准确找到每个换行之后的下一行将会感到困难。


13. 再进一步


这些小贴士已经可以帮你创造出更加精细的网页字体效果,但需要学习的东西仍然很多。当你对字体原则了解更加深入,更有自信地使用它们时,你就会明白如何去尝试并拓宽自己的眼界。


Inside Paragraphs: Typographic Fundamentals


这方面的一本权威教程是刚刚发行不久的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是绝配。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_883736.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大型网站架构系列:电商网站架构案例(1)

大型网站架构是一个系列文档&#xff0c;欢迎大家关注。本次分享主题&#xff1a;电商网站架构案例。从电商网站的需求&#xff0c;到单机架构&#xff0c;逐步演变为常用的&#xff0c;可供参考的分布式架构的原型。除具备功能需求外&#xff0c;还具备一定的高性能&#xff0…

大型网站架构系列:电商网站架构案例(2)

电网网站架构案例系列的第二篇文章。主要讲解网站架构分析&#xff0c;网站架构优化&#xff0c;业务拆分&#xff0c;应用集群架构&#xff0c;多级缓存&#xff0c;分布式Session。 五、网站架构分析 根据以上预估&#xff0c;有几个问题&#xff1a; 需要部署大量的服务器&…

大型网站架构系列:电商网站架构案例(3)

本文章是电商网站架构案例的第三篇&#xff0c;主要介绍数据库集群&#xff0c;读写分离&#xff0c;分库分表&#xff0c;服务化&#xff0c;消息队列的使用&#xff0c;以及本电商案例的架构总结。 6.5数据库集群&#xff08;读写分离&#xff0c;分库分表&#xff09; 大型网…

大型网站架构系列:负载均衡详解(1)

面对大量用户访问、高并发请求&#xff0c;海量数据&#xff0c;可以使用高性能的服务器、大型数据库&#xff0c;存储设备&#xff0c;高性能Web服务器&#xff0c;采用高效率的编程语言比如(Go,Scala)等&#xff0c;当单机容量达到极限时&#xff0c;我们需要考虑业务拆分和分…

大型网站架构系列:负载均衡详解(3)

本次分享大纲 软件负载均衡概述Ngnix负载均衡Lvs负载均衡Haproxy负载均衡本次分享总结 一、软件负载均衡概述 硬件负载均衡性能优越&#xff0c;功能全面&#xff0c;但是价格昂贵&#xff0c;一般适合初期或者土豪级公司长期使用。因此软件负载均衡在互联网领域大量使用。常用…

大型网站架构系列:负载均衡详解(4)

本文是负载均衡详解的第四篇&#xff0c;主要介绍了LVS的三种请求转发模式和八种负载均衡算法&#xff0c;以及Haproxy的特点和负载均衡算法。具体参考文章&#xff0c;详见最后的链接。 三、LVS负载均衡 LVS是一个开源的软件&#xff0c;由毕业于国防科技大学的章文嵩博士于19…

大型网站架构系列:分布式消息队列(一)

以下是消息队列以下的大纲&#xff0c;本文主要介绍消息队列概述&#xff0c;消息队列应用场景和消息中间件示例&#xff08;电商&#xff0c;日志系统&#xff09;。 本次分享大纲 消息队列概述消息队列应用场景消息中间件示例JMS消息服务&#xff08;见第二篇&#xff1a;大…

大型网站架构系列:消息队列(二)

本文是大型网站架构系列&#xff1a;消息队列&#xff08;二&#xff09;&#xff0c;主要分享JMS消息服务&#xff0c;常用消息中间件&#xff08;Active MQ&#xff0c;Rabbit MQ&#xff0c;Zero MQ&#xff0c;Kafka&#xff09;。【第二篇的内容大部分为网络资源的整理和汇…

12个最佳的免费学习编程的游戏网站

在这篇文章中&#xff0c;我们对 200 多个编程游戏网站的各个方面进行了评估&#xff0c;包括是否免费、是否自由开源、是面对菜鸟还是有经验的程序员、支持的编程语言等等&#xff0c;然后遴选出这 12 个上佳的免费的编程游戏网站&#xff0c;希望能让你或你的朋友(或者你的孩…

11个最值得Java开发者收藏的网站

Java是一种面向对象的编程语言&#xff0c;由Sun Microsystems公司在1995年的时候正式发布。直到今天&#xff0c;Java都一直是最受欢迎的编程语言之一。如今&#xff0c;Java应用于各种各样的技术领域&#xff0c;例如网站开发、Android开发、游戏开发、大数据等等。 在世界各…

2020-08-27 KK日记,记录一下使用flask做的看小说网站

1、前言 虽然一直干着运维的工作&#xff0c;但是对编程却有莫名的兴趣&#xff0c;于是就依仗着大学时的一些编程基础&#xff0c;在空闲时间自学了python、flask框架、bootstrap、jquery&#xff0c;html等。并用此写了一个看爽文的“工具”。 2、设计思路 通过爬虫爬取感兴…

【易懂教程】在Github上搭建网站

首先&#xff0c;还是要说一下“写在前面的话”&#xff0c;文章属于个人学习笔记&#xff0c;抛砖引玉&#xff0c;希望能对你有微薄的帮助。 操作步骤&#xff1a; 既然是易懂教程&#xff0c;当然是图文并茂更能让你理解&#xff0c;将会大量采用图文形式进行讲解。 首先你…

手把手教你搭建网站环境——基于node后台的web服务

战前准备 下载好xftp(必备&#xff0c;用于上传你要部署的文件)&#xff1b;xshell作为windows而言是个非常好用的工具&#xff0c;不过像阿里本来就有控制台&#xff0c;倒不是必备&#xff0c;但是那个控制塔的字符丑得一匹&#xff0c;实在看不下去&#xff0c;我用xhell只…

网站/织梦首页或文章分享微信带缩略图和简介

1.在微信公众号号的基本设置里 2.公众号设置-功能设置-绑定好对应的域名 3.然后下载wechat.php文件下载&#xff0c;放在网站根目录&#xff08;下方提供了下载地址&#xff09; 4.把这段代码放到需要的页面里&#xff0c;url改成自己的域名 ig({ debug: 0,//如果分享失败&a…

如何实现分享网站文章到微信朋友圈时显示指定缩略图或LOGO

微信在分享第三方网站是不显示缩略图和描述的&#xff0c;如下图所示 要解决这个问题必须调用微信JS-SDK接口&#xff0c;下面讲一下如何调用接口 方法一&#xff1a; 第一部分 准备步骤 注册微信公众号。 通过左侧导航“开发”–“基本配置”进入。通过开发者ID及密码调用获取…

我的第一篇文章 ^_^庆祝我的个人网站开张

长沙开始下雨了&#xff0c;早上出去冻的不行&#xff0c;这就是南方的天气&#xff0c;没办法。想想我将要去读研的哈尔滨&#xff0c;现在已经在10度一下了&#xff0c;真不知道到时候怎么过。 下午去交研究生登记表&#xff0c;一份成绩单要盖4个章&#xff0c;每次办个什么…

discuz网站没备案无执照接入支付宝充值功能

discuz个人网站没备案无执照接入支付宝充值功能 文章目录 事情是这样的一、支付宝当面付是什么&#xff1f;二、如何申请当面付接口1.登录 支付宝商家中心2.点击“产品中心”&#xff0c;支付产品中选择当面付3.点击“立即开通”4.按步骤填写 三、创建应用及生成公钥和私钥1.登…

tuzicms企业网站系统安装图文教程

TuziCMS&#xff08;简称TC&#xff09;是基于ThinkPHP 框架开发的企业网站内容管理系统&#xff0c;国内PHPMYSQL 开源建站程序&#xff0c;它具有操作简单、功能强大、稳定性好、扩展性强&#xff0c;二次开发及后期维护方便&#xff0c;可以帮您快速构建起一个强大专业的企业…

如何安装配置TuziCMS网站程序模板

如何安装配置TuziCMS网站程序模板 1.登录网站后台 2.进入网站管理后台首页 3.打开“系统设置”-“模板管理” 4.将设计好的模板放置在程序Public目录 电脑模板&#xff1a;Public\Home 手机模板&#xff1a;Public\Mobile 5.安装配置模板 电脑模板默认风格&#xff1a;配置的…