2024年网页制作的细节 篇1
一、首先要掌握一些HTML的应用
html是一种语言，最初网站的编写全是利用html代码编写出来的， 当年的那些老鸟们一般是用“记事本”或“写字板”直接利用HTML写网页的！ 后来出现了一些所见即所得的工具才使网页设计的工作大大简单化，使我们这些菜鸟即使不懂html也能设计出很美观的网站。现在“傻瓜式”制作网页的软件越 来越多，特别是模板技术的出现更加使网站设计容易操作了，套用现成“模版”就可以制作出很不错的页面来。
HTML对于大部分网迷朋友们来说， 没有必要精通，但是，对于一个网站设计者来说，如果对HTML一点都不了解的话，在网站设计时有某些细节方面问题就非常难以处理了。举个最简单的例子来 说，如果你见到别人的网站上面有一个网页效果很好看，你想把这个效果放到自己的网站上，可你对html一点儿也不懂，这样一来就无法将这个效果移到你的网 站上 ！
其实html的学习是很简单的，尽管说有些html的书厚的吓人，但那也只是手册式的工具书。我们学习html应该象学习dos命令一样，只把最基本的、最常用的那二十多个标签的语法和参数搞懂并且背下来就行了。其它少用的那些标签我感觉就不必去特意学。
顺便说一句，了解HTML最为有效的方法就是阅读和分析自己崇拜喜欢的网页的源代码，有什么不懂的问题请E-MAIL网站的主人虚心请教——这些老前辈都是非常热心的。“听君一席话，胜读十年书”，对于自己的技术提高非常显著哦：-）
二、熟练掌握Dreamweaver 4软件
当你掌握了最基本的html使用方法后，就你应该选一个优秀的网站设计工具了，因为我们平时设计网站还是要用这种工具软件进行设计，如果全靠html编 写那可就老麻烦了。目前这种所见即所得的工具很多，比较出名的有微软的front page(网友简单它为FP,以后大家在看到论坛有人说FP，指的就是这个软件)、Macromedia公司的Dreamweaver 4(网友简单它为dw)、还有IBM公司出的一套设计软件也不错。
这么些种软件我们没有必要全都掌握，我们只要掌握其中的一种即可。在这几种 软件中我吐血推荐Macromedia公司开发的Dreamweaver 4网站制作软件！目前老鸟新鸟都用这个软件，它使用简单、功能强大。但如果目前你以经使用fp,并感觉fq用的很好，那就没必要换用dw。我们使用工具的 目的就是设计网站，只要能利用工具把自己的目的达到即可，至于说用什么样的软件是无所谓的。就好像一个人天天下班骑车回
家，那他就没必要一定得学会怎么样开车回家、怎么样骑马回家，怎么样开飞机回家。
三、具有对网站的整体布局、风格和页面创意设计能力
网络世界的精髓就是个性化，一个网站的布局和设计至少要占全部工作量的百分之六十左右！我们已经看够了许多没有特性的网页，建议大家在考虑建站的当初尽 量选择自己最喜欢最拿手的东东——做自己最开心的东西工作也是一种快乐！那么这种能力怎么样培养呢？我觉得最好的方法就是要多看优秀的网站，并且常问自己 为什么会感觉这个网站好看？它研究好在哪里？久而久之，什么样的网站是一个设计优秀
的网你心里就有数了。
四、对图片、声音、动画处理技术要掌握
目前来看现在网上纯文本的网页非常少了，如果一个成功的网站一张图片也没有那是不可能的。但图片的使用也要适当，过多的图片即影响速度又使页面失去了主题。适当的使用图片有“画龙点睛”的作用。
图片怎么学呢？要学到什么程度呢？我在这里还是推荐Macromedia的产品，这个公司针对网站设计一共推出了三个产品，前面我介绍了一个 Dreamweaver 4是用来设制作网站的。它们公司还有Fireworks 4和Flash 5这两个软件。Fireworks 4这个软件就是用来进行网站图片处理的，我个人觉得学他要比学photoshop好。
Flash 5这个软件是用来做动画的，网上所说的闪客指的就是做flsh动画的高手。这两种软件的最基本的使用方法大家应该掌握，至少，网站设计所应该学会的最主要 的软件就是这些了。至于说那些制作logo、banner、javascrpt小效果等一类的专门软件就很好学了，基本装上后看看就能使用了。
五、网站的管理及后台程序的调试要有一定的了解
所谓的网站管理包括资料的收集整理、写作和制作、及时更新网页和提供高质量的服务等方面。现在的网页一个星期进行一次更新已经无法满足大部分网迷朋友的 要求。所以，还是首先考虑自己的经济基础、精力和时间能不能跟得上。使用网页源代码“更新”的朋友们请注意：这是一种非常不明智的做法，对得起拜访你的主 页的朋友们吗？！
但是对于个人网站来说站长光杆司令精力有限，那该怎么样来解决这个问题呢？解决的办法是有的，那就是让自己的网站具有交互 性，可以让众多和你有相同爱好的网友帮助你共同管理网站。你可以建立文章发布系统来让网友帮助你更新、添加文章。类似这样功能的其它免费系统有很多的，我 们下载后可以进行修改，让其具有自己的特色，然后上传到自己的空间，我感觉这样的系统和专业的相差并不是很多。我个人觉得并没有必要天天去抠asp、 php编程。我们并不都想当程序员，网上免费的东东已经做的很不错了，拿过来会修改会安装就可以了。但这是我个人看法说的不一定对。
2024年网页制作的细节 篇2
营销型网站除了要分析受众人群、搜索词报告等还需要了解一下八点
1、中文域名在搜索引擎不流行的时候这玩意确实好用，在网址里面输入您的公司名称就可以进入到您的网站，不过现在基本已经没什么人用了，大家都用百度了，不建议大家继续使用，最主要费用高，不划算。2、企业邮箱如果您的公司不是大型企业，那么我建议您使用免费的邮箱或者QQ企业邮箱，这两个产品无需任何费用，性价比极高。3、400电话400电话这个东西基本算是一个无底洞，您公司若真有需要最好直接联系三大运营商对比价格，找网络公司或许给您免费安装，可后面的资费标准都是网络公司说的算哦，而且当您发现资费高的时候号码无法通过除了网络公司之外的渠道进行续费的。4、域名转移密码这个东西很关键哦，如果没有这个，若以后跟网络公司产生矛盾或者要更换网络公司的时候没有这个东西的话要使用您原来的域名那将是一件非常麻烦的事。5、备案转移密码这个东西的重要性跟域名转移密码差不多，不过只是国内的服务器或者空间才有用到，对于港台地区或者国外的服务器这个可以忽略。6、网站代码其中网站代码可分为：网站源代码和网站执行代码，由于源码是属于网络公司的产品，故可以不用给客户，但一般情况下至少给客户网站执行代码或者网站加密代码。这几种代码的区别在于，源代码可以进行二次修改开发，而另外两种则无法进行。对于没有开发团队的企业网站用户来说，两种代码是没有什么区别的。7、网站空间这个东西为网络公司必备的收费工具之一，您要有网站必须要有个空间，而空间的好坏可以直接影响到网站整体的用户体验。实际上空间的成本高低最贵的是带宽，其次才是服务器的配置，售后服务，而基本空间商里提到的空间容量往往是最不值钱的。带宽是3大运营商定的，这个价格无法改变，带宽越大价格越贵，这个一般只有网络公司及其产品运营人能了解带宽，普通的企业网站用户是无法刚性需求带宽多大，除非您拥有自己的服务器。服务器配置来说运营网站只要不是一个服务器跑个大几十个企业网站或者说一个流量超大的网站的话也都还可以，当然这里也没有具体值。售后服务指的是网站出问题之后响应跟处理问题的时间，服务越好则处理问题的速度越快。而网站容量基本忽略了，企业网站有1g的情况下基本用不完。什么才送100M后面不够再加钱，那也实在太坑爹了吧……八、网站速度(1)、域名解析速度域名解析一般使用万网或者新网的dns，基本上不会有问题。(2)、网站空间速度这个跟上面说的带宽、硬件配置跟分配给您空间的资源有关系，具体可以参考万网的配置单，能达到万网配置标准的一般足够用的，如果网络公司价格跟万网差不多，你们选万网吧，毕竟大品牌，不会在硬件配置上给您偷工减料，就是费用高了点。(3)、网站代码
这个跟程序员的经验有关系，跟网络公司成立了多少年关系不大，特别是小的网络公司，大的网络公司有整体的框架已经团队会好些，但相对费用会高些。好的代码运行起来效率会高，速度会快并且能减少服务器的资源消耗。
微信公众号SEM联盟里，有很多关于营销型网站建设的文章，感兴趣的人可以关注一下。
2024年网页制作的细节 篇3
当网站优化的基本要素及网站内容都已具备的情况下，决定搜索引擎优化效果的往往在于网页内容的细节问题，许多细节问题的累积就可能产生严重的后果。网站内容推广策略要重视细节问题的专业性。下面是几个重要的细节问题：
（1）让网页标题和内容中包含有明确的关键词
在制作网页时，还有必要对网页标题和内容中的重要关键词做一番修饰，让这些重要的词汇不仅出现在文章标题上，在文章内容中的核心部分，也要适当增加这些关键词的使用频率。这也是现在很多企业最为欠缺的地方。
例如今日头条的后台公告，从标题就能看出里面是什么：
（2）分析用户的检索习惯，不要遗漏重要关键词
除了让网页内容中含有意义明确的关键词之外，还应注意这些关键词应该是比较普通的，也就是容易被别人作为检索词汇使用的，这在企业网站的产品介绍页面中尤其应该得到重视，同样的一个产品，可能有不同的称呼，有些只是词汇前后顺序的不同，考虑到用户有可能采用不同的词汇进行检索，在内容设计中应兼顾各种关键词的组合，尽量不要遗漏重要关键词。这种情况在搜索引擎优化水平较高的领域尤其明显，一个重要关键词设计不够理想就可能将商业机会让给了竞争者。
（3）合理利用谐音关键词获得潜在用户
汉语拼音输入法中的谐音词一直是个有趣的话题，有些企业巧妙利用谐音词获得很多潜在用户。例如，橱柜/厨柜这一组同音词，不要说一般人打字的时候不太注意直接就按了空格键，就算有意挑选没准还有人分不清到底是那个“CHU柜”呢，于是商机就这么诞生了。有一个生产橱柜的企业，尽管网站优化总体效果一般，但网站上几乎所有网页的产品介绍和网页标题都将“橱柜”错写为“厨柜”，结果因错得福，因为很多用户通过关键词“厨柜”搜索而来到该公司网站！
这类情况很多，例如:“新浪微博”与“新浪微薄”；“遨游浏览器”与“傲游浏览器”；“百度一下”与“白度一下”；“凡客网”与“凡科网”，滴滴打车券和滴滴快车券等。阿百资讯运营维护的“大学生网络营销能力秀”活动官网，有许多参赛的大学生因为无意中用谐音词汇为自己的主页带来很大访问量。
（4）如果发布的内容是动态网页，不要忘记“告诉”搜索引擎
对于动态网页，一般说来是不容易被搜索引擎检索到的，不过阿百资讯认为对于这类问题还是有解决办法的，现在普遍采用的技术手段是，将动态网页生成后发布为静态网页，如果网站设计中已经采用了这种方式，那当然好，不过很多网站并没有采用这样的技术，如果发布出来的网页仍然是.asp/.jsp之类的动态网页怎么办？相对于静态网页来说，如果希望这种动态网页被搜索引擎收录，必须“告诉”搜索引擎你有哪些动态网页可以检索才行，因为搜索引擎自己无法到数据库一一将这些动态网页找出来。
“告诉搜索引擎”动态网页内容的方法包括：
一种方式是为网站增加一个XML格式的网站地图，但这种方式并非对所有搜索引擎都有效；
另一种更为简单易行的方式是，在已经被搜索引擎收录的网页上（最好是首页或者适合搜索引擎检索的重要栏目）列出新增加的这些动态网页的标题，并做好完整的URL链接，这样搜索引擎就可以根据这些引导发现这个动态网页了。
在做这种“引导”工作要注意的是，这些动态页面的文章标题最好能在页面上保持一定时间的稳定，以便不同的搜索引擎有足够的时间发现并收录到索引库中去。如果想更为稳妥一些，不妨用一个专门的页面将所有文章标题做一个列表，只要搜索引擎的机器手发现了这个网页，其中链接的文章也就容易被收录了（实际上也就发挥了XML网站地图的作用）。总之，如果网站管理的技术不够先进，那么只能是自己多做一些手工工作了。这种方法一般来说只适用于信息量不是很大的网站，对于每天要发布大量新内容的网站来说，采用这种方法是不太合适的。
关于网页内容的搜索引擎可见性问题，相关的技巧很多，这里不一一列举，只是通过几个细节问题来说明，实施内容推广策略，内容本身固然重要，如果对内容多一些针对性的优化，或者叫“搜索引擎可见性包装”，那么这样的网页内容被用户通过搜索引擎检索时发现的机会就会大大增加。
2024年网页制作的细节 篇4
素材
一般一个只有图片、文字、音频的H5，2-5页左右，5M以内最佳，保证加载时间足够，当然是越小越好。因为素材没有优化好导致的问题太多了，因为手机加载资源的性能有限，必须要考虑H5在不同的手机机型、系统、网络优劣状态下打开后的效果。如果手机性能不佳，H5作品偏大，网络也不够流畅的情况下，会导致作品长时间加载不出，甚至闪屏、卡顿等问题。
兼容性
不同的手机机型，还要考虑不同手机屏幕上手机适配问题。也就是H5页面的尺寸要怎么做才合适，一般会做一个带有出血框的画布，外框尺寸422X748px内框尺寸：375X603px。重要的信息放内框，不重要的信息铺满外框，比如背景图。
设计
1 背景图炫酷的画面，离不开背景的衬托，能否快速更换背景图，相信是考验一个H5页面能否快速完成的准则之一；
2 文本微信交互H5页面更重交互，重视觉效果，在酷炫的背景衬托之下，突出重点的文字往往是点睛之笔；
3 音乐炫酷的背景下，配以提纲挈领式的文字，如果能够再来一段能够引起共鸣的音乐，那是何等的应景；
4 图片背景之外，重点图片之间的交互、与文字的配合正是H5页面能够调动用户感官的重要方式!光速的定义是光在1秒内行驶距离，所以光速比声速快，比打字速度更快。那为什么不用图片呢?
5 视频如果炫酷的背景、精炼的文字、应景的音乐，还不能够让你感到震撼的话，那就来段视频吧!一目了然!
6 按钮(点击跳转链接)H5页面在微信展示的优势是交互效果好，观赏性强，但是归根结底，还是要回到营销的目的上来。或用于宣传，需要链接到更为详尽的介绍页面;或用户收集信息，需要链接到指定的信息收集页面。如此一来，是否具有点击跳转功能就成为判断一个H5工具是否可供选择的硬性标准之一；
7 输入框在微信H5页面中，除宣传类外，大部分都是以收集信息为目的的。除了使用麦客表单、金数据、问卷星等第三方表单收集工具外，各个H5工具内置的输入框功能也不失为一个很好的选择。这样，在对应的后台，不仅可以看到访问信息(如已有查看权限)，还可查看详细报名数据。
其他突破常规，独具风格
创作来源于常识但又要打破常识。通常一个引人注目的设计往往是托陈出新的设计。在这个追求新鲜感和个性化的时代唯有与众不同才能脱颖而出。对于h5页面设计来说，不管是文字内容还是页面观感都要独具风格。
前后呼应，背景衬托
无论是制作H5页面还是制作其他页面，协调感是必不可少的一点。好的页面能给用户一种轻松、舒适的感觉，而这样的页面也必须是一个具有协调性的页面。这就要依靠好的背景来起到衬托作用。而能否快速更换背景图，是考验H5页面能否快速完成的一个准则。
音乐共鸣，勾起情感
人们常说音乐没有国界。但音乐也同时可以打破心灵的界限。或悲伤或喜悦，当你听到一首熟悉或者令你触动的音乐时往往会不由自主的产生共鸣。优美的背景下，配以提纲挈领的文字，再来一首应景的音乐，何愁没有用户的关注。
动态视频，触及内心
在现如今这个快节奏的社会中，枯燥、死板的东西往往给人一种压抑之感，人们往往没有时间去自己深度剖析一段文字的深意。而更喜欢那种一目了然的视频，快速获得自己所需要的生活养分。
总之，好的设计，不仅要依靠好的审美观，还要从用户的角度来审视自己的设计，用户需要的，用户热爱才是最好的肯定。
2024年网页制作的细节 篇5
字体排版绝不仅仅是使用字体那么简单，它包括了关于文字”看上去会是怎么样？”的所有事情——例如文字的大小，行高，颜色甚至文字间留白这样的细枝末节的小事。一个好的文字排版会为你所写的内容定下情感基调，并且可以帮助读者更好的理解其内容和语境。
为了让你使用起来更像是在看一本参考书而不是说明书，本文将会非常精简清晰，如果你想进一步的了解更多细节，可以点击查看在每一章中的”扩展阅读”去深入了解。
这本手册将会在GitHub上开源，并且会持续更新一些最佳实践的范例，希望你们喜欢！
字体排版设计视觉层次
视觉层次是一种理念，它意在传达页面中的元素应该依照其重要性进行组织排版，以便读者可以很容易的通览整个页面，找到相关的内容。一个好的视觉层次可以引导读者在阅读时候的视觉流向。视觉层次被广泛运用于文字排版中，它构成了文字排版设计的理论基石。
请看下图的”爱丽丝梦游仙境”的字体排版设计，它展现了一个清晰的视觉层次：
点击这里 查看网页上的实际效果
视觉层次可以被分成以下4个部分：
字体大小 & 字体重量： 设置字体大小和字体重量是两种构建视觉层次的最简单的方式。他们可以很容易地告诉读者什么地方是最重要的，引导读者的目光落到这里的内容上来。只是简单地为文字加上这两种样式，文章的重点便一目了然了。
定位： 元素定位是另外的一种构建视觉层次的方式，就像上图中，文章的标题和作者信息通过置顶和居中表明了它们的重要性。
字体： 通过使用有对比度的字体可以提高不同元素之间的辨识度，从而构建视觉层次
颜色： 为重要的文字设置不同的颜色也是一种非常简单的构建视觉层次的方式。然而使用这种方式的时候一定要小心，因为颜色的滥用可能会造成重点部分辨识度的降低。
扩展阅读：
Visual Hierarchy： How Well Does Your Design Communicate?
Creating Exciting And Unusual Visual Hierarchies
字体排版中的格式塔原则
格式塔原则， 或格式塔法则， 是一种构建感性认知的规律。当我们观察这个世界的时候，我们通常会意识到，一个复杂的场景是由多个在某些背景之上的物体构成的，而这些物体则是由更小的一些物体构成的，依此循环下去。
在字体排版中我们需要理解的两个很重要的格式塔原则就是”距离原则”和”相似原则”。.
距离原则
为了更好地掌握元素定位的方法，了解距离原则是很重要的。距离原则表明，人们会将靠得近的物体视为有关联的物体，反之，隔得比较远的物体将会被看成属于不同类别。
点击此处查看原图
在字体排版设计中，”距离”指的是通过设置行高、内间距和外间距所制造出来的留白空间。在两段不同的段落之间应该留有明显的并且易于区分的留白间隔，请看下面的例子：
注意啦，你觉得应该把内容相关的部分都挤到一个很小的空间中去吗？当然不是这样，自由随意的留白也是很重要的。距离原则告诉我们，只需要为那些没有关系的段落之间额外的加上一些易于区分的留白就可以了
相似原则
格式塔的相似原则告诉大家，看起来很像的东西会被认为是一类的东西。举个例子，如果所有可点击的文字被设置为天蓝色，那么读者就会认为文章中所有天蓝色的文字内容都是可以点击的。
在字体排版中，相似原则就意味着，拥有同样功能的元素应该在样式上保持一致。如果两组元素的功能相似的话，那么它们也应该看起来很像才对。例如，两篇同为博客帖子的文章应该看起来很像。而相反的，两个功能不相同的元素也应该看起来不像。
扩展阅读：
Gestalt Theory in Typography & Design Principles
Proximity， Uniform Connectedness & Good Continuation
字体选择字体
选择字体是一个具有创造性和情感的过程。不同的字体可以传达不同的情感，你可以尽情挑选一个合适的字体让你的文字感情变得丰沛起来。
首先为你的文字的正文挑选一个合适的字体，当你需要搭配不同字体的时候，记得要保持正文字体的不变，然后试着依据这个字体选择和它相搭配的其他字体。
使用一些例如TypeTester 和 TypeCast 这一类的工具会让你进行字体选择的时候轻松一些。
从他人处获得灵感! Fonts In Use提供了大量的优秀的字体搭配范例。
有些字体本来就是为用作大标题而设计的，而有些字体天生就只适合那些小屏幕，你要依照每个字体的”天性”去使用它们。你可以在WebType 上面找到对于不同字体而言合适的尺寸。此外 TypeKit也标明了其上的字体是适合标题或者是正文。
为了达到最大程度上的兼容，我们建议使用上面列出的格式。或者，只使用 woff2 和 woff也会支持大部分的现代浏览器。
你需要为每个列出来的格式提供一个相应的字体文件。推荐使用 Transfonter 或者FontSquirrel’s Web Font Generator，这样你就可以在只有一个字体文件的情况下，将其转换成不同的文件格式。
尽可能的压缩你的字体文件。 点击这里 查看更多信息。
将多个同源字体文件（细体、常规、半粗体、粗体等等）合并成一个font-family， 尽量不要为每个字体都起一个新的font-family的名字。
或者，你也可以通过线上字体资源服务，如Google Fonts 或者 Typekit引入你想要的字体。
扩展阅读：
Further Hardening Of The Bulletproof Syntax
FontSquirrel： How To Use The Generator
加载字体
在你引入的字体被渲染出来之前，他们需要先进行加载。下面是三种在加载的时候可能会发生的事情：
引入的字体没有被识别出来，字体应用了备用字体。
引入的字体虽然被识别出来但是没有加载，他需要在下载完成之后才会被应用。
引入的字体被成功识别并迅速应用。
场景1只发生在你尝试使用一个不存在的字体，或者声明时候的src指向了一个坏链， 这种情况可以并且应该彻底避免。接着我们跳到场景3，这种情况通常在字体被正确的缓存的时候发生，也是我们喜闻乐见的。场景2中包含着字体加载的过程，字体加载通常是难以避免的（至少是在第一次请求的时候），下面是几种处理方式：
1. 文档样式闪烁方案 （FOUT）
FOUT是指网页会在切换到合适的网页字体之前，使用默认或者备选字体显示文字。这种情况的出现是因为只有当HTML和CSS都被下载完成之后，字体请求才会发出。这就意味着，在HTML被显示出来而字体文件没有被完全下载下来中间存在着一段”空档”时间。 FOUT 算是对大部分的网页而言的最佳选择，主要是其他的选择也许更糟。如果使用得到的话，FOUT 很难被用户察觉出来。
2. 不可见文本闪烁方案（FOIT）
很多年前，一些现代浏览器开始使用一种新的技术来处理字体加载的问题 — FOIT. FOIT是指当浏览器检测到字体正在加载的时候，隐藏应用这段字体的文字，直到字体完全下载完才将其显示出来。 然而我们应该避免这种做法虽然这样做从理论上看起来还不错，但是这会带给那些网络速度比较差的用户十分糟糕的体验。有可能会在最初的FOIT后出现FOUT， 最坏的情况可能会是这段文字将永远看不到了。
3. 白屏方案
即在字体加载完成之前，整个网页都处于不可见的状态，或者也可以采用显示一个进度条.我们只推荐当FOUT 严重影响用户体验的时候使用这种方法。 我们通常在一个网页需要大面积显示一个特定的字体的时候使用该方法，否则，FOUT 总会我们的第一选择，因为”内容至上”。白屏方案与 FOIT很相似， 但对于你来说，你拥有控制在什么时候给用户展示你的内容的自由，这种感觉会似乎更棒一些，不是吗？而且在FOIT方案中， 不可见的文本有时候会给读者带来困惑，而彻底的白屏（或者一个进度条）会让人很自然的觉得是一个正在加载的信号。
不管你是打算使用 FOUT 方案或者白屏方案， 我们都推荐您使用Web Font Loader这个JavaScript库. Web Font Loader 可以让你对 @font-face加以控制， 而且你也为字体加载的体验添加控制事件。
注意： 有一个W3C 字体加载 API也会实现同样的功能，但是它现在的 支持不是很好_
异步地使用 Web Font Loader 很重要，只有这样做才不会延误页面其他部位的渲染。
写样式的时候，让你的备用字体尽可能近的靠近你的实际字体，这样才能最大程度的减少 FOUT造成的影响.点击 这里你将会看到一系列的备选字体. 使用 这个工具你将很容易的看到备选字体和你引入的字体的对比效果.
白屏方案
在这个例子里面，备选字体不需要和你引入的字体看起来很像，因为我们不会用到 FOUT. 依照你自己的喜好去选择备选字体吧。
如果你想要用一个进度条取代白屏，你可以使用Pace。这种方法在用户体验上效果会更好一些，特别是当字体文件很大的时候。
扩展阅读：
Type Study： Choosing Fallback Fonts
FOUT， FOIT， FOFT
Web Font Optimization
OpenType 的特性
OpenType 的特性可以被视为文字进行字体排版时的可选项，它们被用来加强文字的表现和易读性。
p { font-kerning： normal; font-variant-ligatures： common-ligatures contextual; -moz-font-feature-settings： "kern"， "liga"， "clig"， "calt"; -ms-font-feature-settings： "kern"， "liga"， "clig"， "alt"; -webkit-font-feature-settings： "kern"， "liga"， "clig"， "calt"; font-feature-settings： "kern"， "liga"， "clig"， "calt"; }
OpenType 特性被放置于字体之中，这就意味着对于不同的字体，会有不同的特性，在使用这些特性之前，我们需要看一看我们的字体是否支持这些特性。
使用 font-feature-settings来激活 OpenType 特性. 由于目前对于这个属性的支持不好，我们需要在属性之前加上前缀。
Kerning kern， ligatures liga， contextual ligatures clig， 和 contextual alternatives calt这四种适用于所有字体中 ######( 译者注：font-feature-settings这种属性仅支持拉丁文语系的字体使用，并不支持中文哦！ )
Web Style Guide相对大小
尽可能的使用相对大小。
html { font-size： 100% } p { font-size： 1em } @media (min-width： 64em) { html { font-size： 112.5%; } }
font-size： 100% 与浏览器的字体大小设定保持一致而不是去覆写它，根据大多数的浏览器的默认设置，这里也可以用1em 代替表示 16px.
通过改变html 的 font-size会影响到所有单位为 em和rem 的元素.如果是对于响应式设计的网页，这样做还是比较实用的。
用户的选择也很重要，所有不要偏离 font-size： 100%和1em太远.
对于font-size建议使用rem 和 em.
对于一些元素定位如margin， padding等等，建议使用 rem， em， 或者 % 。
对于媒体查询中尺寸建议使用em.
对于一些大的标题字或者配有图片的字，可以使用FitText来实现标题的缩放。尽量避免使用vw 和 vh因为现在的支持还不是很好，难于精确的配置，并且对于一些浏览器的字体和缩放设置并不适配 。
扩展阅读：
Type Study： Sizing The Legible Letter
5 Useful CSS Tricks for Responsive Design
REM vs EM – The Great Debate
PX， EM or REM Media Queries?
容器
容器，或者称为包装，指的是用来包裹一个或者多个元素的HTML元素。它将元素分组，从而更好进行语义化、修饰以及布局。
html { box-sizing： border-box; } *， *：before， *：after { box-sizing： inherit; } .container { max-width： 67rem; padding-left： 1.5rem; padding-right： 1.5rem; }
强烈建议使用 box-sizing： border-box. 点击这里 查看更多信息。
左/右内间距与最大宽度联合使用可以很容易地创建一个移动端友好的容器。
要为容器选择一个合适的宽度，既不能太大（因为太大的话读者的眼睛难以聚焦）也不能太小（这样读者的眼睛需要经常移动才可以看清）。永远记住，在进行网页字体排版的时候，没有一个适合所有字体、尺寸、行距和分辨率的铁律，你需要自己来做决定。
扩展阅读：
* { Box-sizing： Border-box } FTW
StackOverflow： Ideal Column Width For Paragraphs Online
字体大小
使用 缩放模块 可以帮助你决定在你的元素上面应用怎样的font-size .缩放模块指的是依照其内容安排的一系列比较合适的字体大小的数值。
缩放模块的说明. 点击此处
我们可以在编写CSS的一开始使用缩放模块，将它作为一个参考。
值的注意的是，尽管不同的字体有着不同的大写字母高度和x字母高度，可是大多数的模块化缩放工具都没有将这些考虑在内。
在你的样式表中，建议将你所使用到的缩放模块工具的配置信息写在注释之中。
响应式的缩放模块
只使用单独的一个缩放模块方案并不一定适合所有分辨率的设备，为了解决这个问题，你可以依据用户的设备的分辨率的不同提供不同的缩放方案
垂直距离
文字间的垂直距离是由 line-height， margin， 和padding构建出来的.
line-height 不应该带有单位。比较宽的容器里面文字的行高会大一些，而那些比较窄的容器里面行高相对来说小一些会比较合适。
为那些具有单方向的文本元素添加margin属性，建议使用margin-bottom.
要遵循距离原则.
垂直节律
垂直节律是指元素之间的垂直间隔要保持一致性。这一点十分重要，它可以带给读者视觉上放松的享受，给他们一种亲近的感觉。
Image source建立垂直节律很简单。首先，确定你使用的基础垂直内间距和基础垂直外间距的数值。然后，为你的容器，文字性元素或者其他相关元素的单方向的外边距（或者内边距）应用这个数值。如果你需要制制造更大的间隔的话，应用这个数值的倍数就好啦!
将基础间距的数值设置成与行高相同的数值，这样你的文字就像写在一个条格纸上那样整齐，就像我们传统的印刷字体设计的那样。然而，想要文字拥有垂直节律不一定需要按照上面的方法来做，只要你设置了一个基础间距，并且使得其他间距都是由这个间距成倍的得来的，那样就可以了。
文字底部对齐基线网格
文字底部对齐基线是垂直节律的一个更为严格的实现。在网页中，文字通常在line-height间居中对齐.但对于较大的文字来说会比较讨厌，因为这样做会导致在顶部和底部留有太多的空间。在传统印刷的时候，这个问题一般会通过让文字对齐基线网格的底部得以解决。
我们也可以通过为较大的文字添加一个负的margin-top和一个较小的margin-bottom，不需要使用基线网格而解决这个问题。
图片资源为不同的字体样式、字体大小和分辨率添加一个底部对齐的基线网格并不是一个很容易的方式，所以强烈建议你使用一个字体排版基线库例如 Sassline 或者 MegaType.
注意，垂直节律只是一个建议，而且基线网格也只是想象出来的。所以我们不需要在每个使用场合都遵循这个规律，也不用在每个元素中都去追求像素级别的完美。
扩展阅读：
Why is Vertical Rhythm an Important Typography Practice?
Aligning type to baseline the right way using SASS
Is Web Typography Completely Broken?
Single-direction Margin Declarations
颜色
颜色可以很大程度上的增加视觉辨识度，是字体排版中一个重要的组成部分。
不要随心所欲的挑选颜色，建议使用颜色板，建议你使用 Material Design colors 和 Flat UI colors 中提供的颜色板进行颜色选择.
不要过度滥用一个颜色，因为这样会造成辨识度的降低，同样也不要使用很多完全不同的颜色。
遵循相似原则.
不建议使用纯黑 #000 作为你的正文颜色，你可以选择一个非常灰的颜色如#333.
有时候，使用透明颜色比使用浅色会更好一些，如果你深入的了解，可以点击这里 。
确保文字和背景有较大的对比度，你可以使用 这个对比度检测工具 帮助你进行选择.
####扩展阅读：
Magic Of CSS： Color
Google Style – Color
下划线
在印刷品里，永远都不要使用到下划线，因为这样做会影响文字的阅读，重点是，它很丑！Practical Typography
一般的来说，在网页中下划线也会看起来并不美好！幸运的是， background-image 就包含一个方法，它可以使得下划线变得好看一点。 下面是Adam Schwartz使用Sass实现的下划线的例子 ：
SmartUnderline 是一个简化这个工作的库。建议你只在有链接的地方使用下划线，这是大多是网站都遵循的规律，如果不这么做的话，可能会引起误解。