网站的关键!教你13步打造优雅的WEB字体-UI设计 PS-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝27
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:144回复:0

网站的关键!教你13步打造优雅的WEB字体

楼主#
更多 发布于:2016-06-12 11:53

网站的要害!教你13步发明高雅的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使你能够假造一些工作。假如字体自身没有粗体的变体,标签能够经过双重渲染+稍微侧移的方法将文本人为地加粗。为没有斜体款式的字体加上标签能够完成斜体作用。由此发生的歪曲字符令人不忍目睹。
更主要的是防止运用和标签,而用和取而代之。前者只触及字体的外观,也即是所谓的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标签环绕阶段的结尾。在其它状况下,很少有期望下个单词能重新一行开始而插入换行的做法,因而请慎重运用
标签。最常见的原因是要将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,作者为Cyrus Highsmith. 这本宝典和Robert
Bringhurst的基础教程The Elements of Typographic Style,或 Erik Spiekermann 和 E.M.
Ginger’s所著的Stop Stealing Sheep & Find Out How Type Works是绝配。




[font=Tahoma  ]优质IT资源分享社区为你提供此文。
本站有大量优质UI设计(含PS,软件 网页 平面设计等)教程视频,资料等资源,包含UI设计基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

UI设计教程视频
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客