css如何使标题不占网页背景 如果不用印象笔记，哪款笔记软件最有可能代替它？
如果不用印象笔记，哪款笔记软件最有可能代替它？
十分感谢邀请
手机里面去下载了两个笔记，印象和八方通云，个人更喜欢有道云笔记。在电脑、手机、网页、平板可以使用的笔记应用。你在不可以一个平台编辑的内容，都可在其他平台浏览和可以修改，还这个可以一键恢复收藏微博、、网页等，永久保存和管理你去珍惜的内容。
怎样在网页中做出精彩的文字排版？
字体排版绝对不单单是使用字体那你简单点，它和了关於文字”看起来会是好不好？”的所有事情——的或文字的大小，行高，颜色甚至还文字间留白这样的细枝末节的小事。一个好的文字排版会为你的所写的内容商议好情感基调，因此也可以帮读者更好的理解其内容和语境。
就是为了让你建议使用起来更像是在看一本参考书而又不是说明书，本文可以说太系统精简清晰，假如你想一系列的了解更多细节，可以不点击查看在每一章中的”扩展阅读理解”去进一步了解。
这本手册将是在GitHub上开源软件，而且会坚持了更新完一些最佳实践的范例，希望你们就是喜欢！
字体排版设计视觉层次
视觉层次是一种理念，它意在转述页面中的元素应该九十条其重要性接受组织排版，尽快读者可以不非常容易的通览整个页面，找到相关的内容。一个好的视觉层次可以约束读者在阅读时候的视觉流向。视觉层次被应用范围运用于文字排版中，它构成了文字排版设计的理论基石。
请看下图的”爱丽丝梦游仙境”的字体排版设计，它淋漓尽致地展现了一个清晰的视觉层次：
然后点击这里一栏网页上的实际效果
视觉层次也可以被等分以下4个部分：
字体大小amp字体重量：设置字体大小和字体重量是两种构建视觉层次的最简单的。他们可以不很难地提醒读者什么地方是最最重要的，引导读者的目光落到这里的内容过来。只不过是很简单地为文字另外这两种样式，文章的重点便一眼便知了。
定位：元素定位是另外的一种最终形成视觉层次的，得象上图中，文章的标题和作者信息置顶或星标和横列说了它们的重要性。
字体：实际使用有对比度的字体可以能提高相同元素之间的辨识度，最终达到构建体系视觉层次
颜色：为不重要的文字设置不同色彩确实是一种非常简单点最终形成视觉层次的。然而建议使用这种的时候你必须谨慎，只不过颜色的滥用抗菌药物很可能会导致重点部分辨识度的降底。
扩大阅读：
VisualHierarchy：HowWellDoesYourDesignCommunicate?
CreatingExcitingAndUnusualVisualHierarchies
字体排版中的格式塔原则
格式塔原则，或格式塔法则，是一种构建感性认知的规律。当我们观察这个世界的时候，我们常见会本能到，一个急切的场景是由多个在某些背景之上的物体所构成的，而这些物体则是由更小的一些物体近似的，依此循环下来。
在字体排版中我们不需要理解的两个很重要的是的格式塔原则就是”距离原则”和”相象原则”。.
距离外原则
目的是更好地掌握到元素定位的方法，所了解距离原则是很最重要的。相距原则因为，人们会将靠得近的物体视为有关联的物体，则难，隔得也很远的物体很快就会被看成不属于同类别。
然后点击此处查找原图
在字体排版设计中，”距离”指的是设置中行高、内间距和外间距所可以制造进去的留白空间。在两段完全不同的段落之间应该留有的确的并且也易区分的留白间隔，请看下面的例子：
特别注意啦，你觉得应该是把内容相关的部分都挤到一个很小的空间中去吗？不过不是什么这样，自由随手的留白确实是很有用的。距离原则告诉我们，只需要为那些没有关系的段落之间额外的另外一些更易区分的留白就可以了
相象原则
完形心理学的相象原则告诉大家，看起来很像的东西会被怀疑是一类的东西。举个例子，假如所有可再点的文字被设置为天蓝色，那么读者是会如果说文章中所有天蓝色的文字内容大都这个可以再点的。
在字体排版中，几乎完全一样原则就换句话说，占据虽然功能的元素肯定在样式上保持一致。要是两组元素的功能有几分相似的话，这样的话它们也肯定看起来很像才对。或者，两篇同为博客帖子的文章肯定看起来好像很像。而反过来的，两个功能不完全相同的元素也估计虽然不像。
扩展阅读：
GestaltTheoryacrossTypography amp Design PrinciplesProximity，UniformConnectednessampGoodContinuation
字体中,选择字体
中,选择字体是一个具有创造性和情感的过程。相同的字体可以不去传达相同的情感，你可以尽情挑选两个最合适的字体让你的文字感情变地充沛出声。
必须为你的文字的正文挑选两个比较好的字体，当你不需要配搭完全不同字体的时候，我记得要保持正文字体的变，然后把试着依据什么这个字体选择和它相最好搭配的其他字体。
可以使用一些或者TypeTester和TypeCast这一类的工具会让你通过字体中,选择的时候快的那些。
从他人处完成任务灵感!FontsintoUse提供了大量的极优秀的字体可以搭配范例。
有些字体一开始是为用作大标题而设计的，而有些字体天生神力就只比较适合那些小屏幕，你要依据法律规定每个字体的”天性”去不使用它们。你这个可以在WebType上面找到对此相同字体而言适合的尺寸。再者TypeKit也特别注明了其上的字体是合适标题或则是正文。
替都没有达到最大程度上的兼容，我们个人建议可以使用上面列下的格式。或是，只在用.ttf2和woff也会支持什么大部分的现代浏览器。
你需要为每个列出去的格式需要提供一个你所选的字体文件。推荐一下可以使用Transfonter或则FontSquirrel'sWebFontGenerator，这样你就这个可以在只有一个字体文件的情况下，将其转换成有所不同的文件格式。
尽可能会的装换你的字体文件。再点这里点此查看信息。
将多个同根字体文件（细体、常见、半粗体、粗体等等）扩展成一个font-family，最好就是最好不要为每个字体都起一个新的font-family的名字。
也可以，你也这个可以通过线上字体资源服务，如GoogleFonts或者Typekit引入你想的字体。
存储阅读：
FurtherHardeningwithThe Bulletproof SyntaxFontSquirrel：How ToUseTheGenerator
打开程序字体
在你引导出的字体被软件渲染出去之前，他们不需要先接受打开程序。下面是三种在运行程序的时候肯定会发生的事情：
分解重组的字体就没被不识别出，字体应用了葱切段字体。
分解重组的字体只不过被不能识别进去但是没有加载，他必须在下载成功之后才会被应用。
引导出的字体被成功了识别并迅速应用。
场景1只发生在你数次不使用一个不存在的字体，或是声明时候的src正指向了一个坏链，状况这个可以但是肯定彻底避免。随后我们跳到场景3，这个正常情况在字体被正确的的缓存的时候不可能发生，都是我们知音体的。场景2中中有着字体程序加载的过程，字体加载正常情况是难以以免的（最起码是在两次只是请求的时候），下面是俩种处理
1.文档样式光芒闪烁方案（FOUT）
FOUT是指网页会在可以切换到适合的网页字体之前，建议使用设置或者备选字体没显示文字。这种情况的出现是只不过仅有当HTML和CSS都被可以下载成功之后，字体跪请才会口中发出。那就，在HTML被会显示进去而字体文件也没被彻底上网下载下来中间存在地着一段”空档”时间。FOUT不算对大部分的网页而言的最佳选择，通常是其他的选择或许更糟。如果没有建议使用能够得到的话，FOUT没法被用户查觉到出来。
2.决不可见文本闪烁不停方案（FOIT）
很多年前，一些古代浏览器就开始不使用一种新的技术来一次性处理字体运行程序的问题—是指当查看网页器怎么检测到字体正在读取的时候，隐藏应用这段字体的文字，直到字体全部直接下载完才将其没显示出去。但他我们应该要尽量的避免这种做法可是这样的做从理论上看起来还确实不错，可是这会却让那些网络速度比较好差的用户极为糟糕的体验。有可能会在最初的FOIT后会出现FOUT，最坏的结果的情况可能会是这段文字将永远无法看到了。
3.白屏方案
即在字体加载成功之前，整个网页都处在决不可见的状态，的或也这个可以需要总是显示一个进度条.我们只推荐当FOUT十分严重影响用户体验的时候在用这种方法。我们常见在一个网页必须大面积没显示一个某个特定的字体的时候可以使用该方法，不然的话，FOUT总会我们的第一选择，只不过”内容高于一切”。白屏方案与FOIT很相象，但相对于你来说，你拥有再控制在什么时候给用户影像展示你的内容的自由，这种感觉会倒是更棒一些，也不是吗？而且在FOIT方案中，绝不可以见的文本总是会给读者给他困惑，而彻底的黑屏死机（也可以一个进度条）会让人很自然的觉着是一个正准备运行程序的信号。
无论你是准备不使用FOUT方案或则白屏方案，我们都帮我推荐您不使用WebFontLoader这个JavaScript库.WebFontLoader可以不让你对@font-face略加再控制，不过你也为字体打开程序的体验直接添加完全控制事件。
尽量：有一个W3C字体打开程序API也会利用则是的功能，只不过它现在的支持不是什么挺好_
异步模式地可以使用WebFontLoader很重要，至少做才不会严重延误页面其他部位的3d渲染。
写样式的时候，让你的葱切段字体尽肯定近的西面你的求实际字体，那样才能最大程度的减少FOUT造成的影响.点击这里你城就会注意到一系列的备选字体.不使用这个工具你将很难的见到备选字体和你化入的字体的对比效果.
白屏方案
在这个例子里面，备选字体不是需要和你核心中的字体看起来很像，而且我们不会用到FOUT.依照你自己的喜好去选择类型备选字体吧。
如果没有你想要用一个进度条脱离白屏，你可以可以使用Pace。这种方法在用户体验上效果会好一些，特别是当字体文件不大的时候。
储存阅读：
TypeStudy：Choosing Fallback FontsFOUT，FOIT，FOFTWeb FontOptimization
OpenType的特性
OpenType的特性这个可以被纳入文字通过字体排版时的可选项，它们被为了起到文字的表现和易读性。
p{font-kerning：normalfont-variant-ligatures：common-ligaturescontextual-moz-font-feature-settings：kern，liga，clig，calt-ms-font-feature-settings：kern，liga，clig，alt-webkit-font-feature-settings：kern，liga，clig，caltfont-feature-settings：kern，liga，clig，calt}
OpenType特性被放置于字体之中，那就相对于有所不同的字体，会有有所不同的特性，在使用这些特性之前，我们必须看看那我们的字体如何确定接受这些特性。
使用font-feature-settings来怎么激活OpenType特性.的原因目前是对这个属性的支持不好，我们是需要在属性之前另外前缀。
Kerningkern，ligaturesliga，contextualligaturesclig，和contextualalternativescalt这四种范围问题于所有字体中######(译者注：font-feature-settings这种属性仅支持拉丁文语系的字体建议使用，并不接受中文哦！)
WebStyleGuide相对于大小
尽可能的使用总体大小。
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只不过现在的接受还不是什么很好，甚难不精确的配置，另外这对一些浏览器的字体和缩放可以设置当然不全面兼容。
存储阅读：
TypeStudy：Sizing The Legible Letter Useful CSS TricksofResponsiveDesign
REMvsEM–The GreatDebate
PX，EM同问REM Media Queries?容器容器，的或一般称包装，指的是利用包裹三个或则多个元素的HTML元素。它将元素分组，最大限度地好些接受语义化、修饰在内布局。
html{box-sizing：border-box}*，*：before，*：after{box-sizing：inherit}.container{max-width：67rempadding-left：1.5rempadding-way：1.5rem}
恐怖见意不使用box-sizing：border-box.直接点击这里即可查看信息。
左/右内间距与大的宽度同盟可以使用可以很容易地创建角色一个移动端敌视的容器。
要为容器选择一个比较合适的宽度，既没法太大（因为太大的话读者的眼睛难以聚焦）也又不能太小（这样的读者的眼睛要经常会天翼才也可以能够看清楚）。会永远记住了，在参与网页字体排版的时候，没有一个更适合所有字体、尺寸、行距和分辨率的铁律，你必须自己来做决定。
存储阅读：
*{Box-sizing：Border-box } FTWStackOverflow：IdealColumnWidthanyParagraphsOnline
字体大小
使用缩放比例模块可以不好处你做出决定在你的元素上面应用怎样的font-size.图像大小模块指的是九十条其内容安排好的一系列比较好比较合适的字体大小的数值。
比例缩放模块的说明.然后点击此处
我们是可以在编写CSS的一开始在用比例缩放模块，将它作为一个建议参考。
值的注意的是，尽管有所不同的字体有着差别的大写字母高度和x字母高度，但是大多数的模块化比例缩放工具都没有将这些决定在内。
在你的样式表中，见意将你所可以使用到的缩放模块工具的配置信息写在注释之中。
响应式的缩放模块
只不使用单独的一个缩放模块方案的确肯定会更适合所有分辨率的设备，为了可以解决这个问题，你是可以依据什么用户的设备的分辨率的不同提供不同的缩放方案
直角距离
文字间的平行距离是由line-height，margin，和padding最终形成不出来的.
line-height没有必要类似单位。比较宽的容器里面文字的行高会大一些，而那些也很较宽容器里面行高相对来说小一些会也很最合适。
为那些本身单方向的文本元素直接添加margin属性，建议使用margin-bottom.
要不违背距离原则.
互相垂直节律
互相垂直节律是指元素之间的互相垂直不要超过要达到一致性。这点极其，它可以也让读者视觉上彻底放松的享受，给他们奇异交好的感觉。
Imagesource成立垂线节律很简单。首先，确定你在用的基础垂线内间距和基础垂线外间距的数值。然后，为我的容器，文字性元素也可以其他相关元素的单方向的外边距（或是内边距）应用这个数值。如果你不需要制能制造极大的间隔的话，应用这个数值的倍数就啦!
将基础间距的数值设置成与行高是一样的的数值，这样的你的文字那像写在一个条格纸上那样的两排，那像我们现代的印刷字体的设计的那样。但他，打算文字占据直角节律不是有需要通过上面的方法来做，如果你设置了一个基础间距，并且也让其他间距都是由这个间距大幅度提升的得来的，那样就可以了。
文字底部角点基线网格
文字底部尺寸线基线是平行节律的一个最为严不的实现。在网页中，文字常见在line-height间两端对齐.但对此会增大的文字来说会都很讨厌，只不过这样的做会导致在顶部和底部留有太多的空间。在比较传统印刷的时候，这个问题好象会通过让文字整个表格基线网格的底部绝无可能可以解决。
我们也也可以按照为减小的文字添加一个负的margin-top和一个相对大的margin-bottom，不是需要可以使用基线网格而可以解决这个问题。
图片资源为不同的字体样式、字体大小和分辨率去添加一个底部环形折弯的基线网格并不是什么另一个容易的，所以浓烈我建议你你使用一个字体排版基线库或者Sassline的或MegaType.
注意一点，垂线节律只是一个建议，并且基线网格也只是想像不出来的。所以我我们不是需要在每个不使用场合都按照这个规律，也用不着在每个元素中都去追求像素级别的超级。
扩充卡阅读：
whatisVerticalRhythmanImportantTypographyPractice?
AligningtypedidbaselinethebackwayusingSASS
IsWebTypographyCompletelyBroken?
Single-direction Margin Declarations
颜色
颜色是可以太大程度上的减少视觉辨识度，是字体排版中一个重要的是的组成部分。
不要随心所欲的看中颜色，建议可以使用颜色板，建议你使用Material Design colors和FlatUIcolors中需要提供的颜色板参与颜色选择.
不要过度滥用抗菌药物一个颜色，毕竟这样会倒致辨识度的降低，同时也别在用很多已经不同颜色的。
遵循什么几乎一样原则.
不建议您在用纯黑#000充当你的正文颜色，你是可以你选一个非常灰的颜色如#333.
有时候，在用蓝色透明颜色比不使用深色会更合适一些，要是你踏入的了解，也可以再点这里。
以保证文字和背景有较高的对比度，你也可以可以使用这个对比度检测工具解决你并且选择.
####扩展阅读：
MagicoftheCSS：ColorGoogle Style – Color下划线
在印刷品里，永远永远都千万不能使用到下划线，只不过这样的做会影响文字的阅读，重点是，它很丑！PracticalTypography
像是的来说，在网页中下划线也会感觉起来的确美好！幸运的是，background-image就乾坤二卦一个方法，它可以以至于下划线变得好看一点儿。下面是Adam Schwartz建议使用Sass实现方法的下划线的例子：
SmartUnderline是三个汉字拆分这个工作的库。建议你只在有音乐链接的地方建议使用下划线，这是大部分是网站都按照的规律，要是不这样做的话，很有可能会过多误解。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
