哥们儿来搞网页排版，别小看那些文字之间的距离设定对了，页面瞧着高大上，又好看，用起来就更舒服了，逼格马上就上来了！你知道吗，字间距不是由字体大小决定的，还要结合到整个设计的调性。想突出重要信息的话？那就在词或句之间空开一点，大家看得清楚明了。
二、CSS中设置文字间距的方法
1. letter-spacing
在CSS中，letter-spacing就像个神奇的魔术棒，无论用px单位还是em单位，都能变动字符之间的距离。想让间距大点？加个正号就能搞定！想要缩小间距？那就添个负号！改动几个letter-spacing参数，你的文字瞬间变个性十足！
2. word-spacing
你们听说过word-spacing吗?这个就是控制词语之间空隙的方式，和 letter-spacing差不多哈。只不过这次是用词作为计量单位，可以输入各种数值，还能用加或减来调整间距。设置好之后，连载的文章都会看着舒服多了哩！
3. text-align
跟你说件好玩儿事！原来，字体对齐（text-align）功能竟然不止让文字排得漂亮，还可以调节字间距！像用”justify”的话，浏览器就能自动在单词间留出空间来弥补两端的不足，看起来整整齐齐的。要怎么用？超级简单，我们只需要轻轻一调这个属性就能实现多种文字对齐方案！而且还能任意调整字符顺序
p {
letter-spacing: 0.1em;
}
4. text-justify
小伙伴们让我告诉你个神奇的工具，叫做text-justify。用这个，就不用担心文字排放问题，比如对齐和间距什么的都能轻松搞定，效果出来绝对高大上哟。所以说，这玩意儿绝对是咱们玩转文字排版的必备神器！
5. white-space
p {
word-spacing: 0.5em;
}
关于文章里的空格和换行，你得知道white-space这个属性。把它设置为normal的话，那些连着的空格和换行就会自动变成一个简单的空格；要是设置成pre，它们就保持原样不变，这样就轻松搞定文档中的空格与换行问题了！
6. line-height
告诉你们个好玩儿的小知识，在CSS里面有个叫做line-height的功能可以用来调整行间距！这样做出来的文字效果会比较好看，整张网页都会显得高大上很多。运用得巧妙的话，屏幕上看字就很清晰，页面设计也就更加出彩了哟~
p {
text-align: justify;
}
7. font-kerning
font-kerning,就是调节字间距哒。其实大部分浏览器默认都有开，但想要字间距更好看点？那就试试换成”normal”or “none”！
8. text-indent
说实话，text-indent就是像开头加个空格那样，让文章看起来更舒适。怎么调都可以，手敲数字或用比例都成。这样一来，段落一清二楚，心情也超级舒畅！
p {
text-justify: inter-word;
}
瞧瞧这里，让我来教你调整字间距，做出最赞的网页。找到最适合的那款方案，充满美感又能吸引住用户眼光！
三、总结与展望
网页舒服多了？用字间距调节，字间宽敞点，读得也轻松舒心。懂行的朋友都知道，随着网络设计技术越来越高超，新花样真会层出不穷，满足大家各式各样的需求。
哈喽！记得要用CSS属性时别太死板！字号别搞太多花样，看得我头晕。希望这个小提醒让你更轻松掌握如何调整CSS文字间距。还在为每个设计需求设定不同字体大小而烦恼？
p {
white-space: pre;
}
。
评论0