您现在的位置是:

最好看的网站字体排版是啥样?

Jkay10-23 18:08:14762

原谅我做了标题党,其实我也在探究这个问题,谁要是找到了答案,请一定也告诉我。下文是我的一些探索和收获。

每文一图:本篇搜索词 - 图库选取

最好看的网站字体排版是啥样呢?

我参考手机百度上的百家号文章做为文字排版的样本,把本网站的字体排版设置成了现在的样子。

现在的比以前密密麻麻的清爽多了。改变在于哪里呢?其实就在于下面这段代码,我把它贴出来,大家以后做网页文字排版的时候可以参考。

代码如下,(加在CSS里):

.news_infos p { margin-top: 22px;}
.news_infos { line-height: 24px;
           padding: 20px 0;
           font-size: 16px;
           text-align: justify;
           letter-spacing: 0.2px;
           word-break: break-word;}

注意,前面都有英文的点。

首先    .news_infos p { margin-top: 22px;}    这段,我调整了文章段落里的间距,改成了上外边距,这样每次打横线分割线的时候,就不会贴着下面的段落了。

拿上一篇友人的销售素材文章举例,如果没有定义 margin 的效果,就是密密麻麻:

如果把定义 margin 下边距的效果:


要是有横线,下面就是贴着文字,也不好。

所以定义了上边距之后,现在的效果:


就正常多了。

好,这是第一个改动,调整了段落与段落之间的间距问题。

第二个改动,就是调整段落里的文字效果。

.news_infos { line-height: 24px; 
           padding: 20px 0;
           font-size: 16px;
           text-align: justify;
           letter-spacing: 0.2px;
           word-break: break-word;}

这是我参考了百家号的文章在手机端的显示排版,得到的代码。

具体到本站,就是多了一个字与字之间的间距 letter-spacing,我把它按百家号的原样,设定为0.2px。

然后这还没完,需要搭配 text-align: justify; 使用,表示自动对齐两边。这两样一添加以后,网站文章在手机端的效果是这样的:

两边就对齐了。遇到英文单词还会自动错开分段。

代码最后那句 word-break: break-word; 就是代表在符合我们语法习惯的地方分下一句,因为我这是中文网站,平常英文很少,所以不用在意。而且我不加也自带这个效果,说明关于断句问题 mipcms系统自已就设置好了。

最后我还把正文字体颜色加黑了,以前是#555,有点灰。现在改成了#111,比最黑的#000,很接近了。这样看起来清晰一些。

其他还做了一些细微的改动,这里就不一一写了。一切尽在访问中。

对了,用电脑登陆本网站,会看到右下角的隐藏图案哦。灵感来自于网上大家总说的一句话,有事漂流瓶联系啊。

记得漂流瓶联系,你懂的。(图案模块在手机端隐藏,要是哪天你在手机上看到了,那可说明网站代码出了大问题~很有可能是我备份到很久以前的版本去了)

11.21 更改说明:微信图片已删,喜欢本站的话,关注一寸照片熊掌号就行,在后台里留言,作者都会看到的。谢谢!

关注我

公众号: 清单自由

ID名: free10s

一个干净的公众号

分享能分享的一切

期待你的关注~

本栏推荐

  • 销售技巧-如何陌生拜访

    这篇文章是一位好朋友的原创供稿,放在百家号后台里有三千多字,就想拆分成三篇。因为我看很多百家作者的篇幅字数都是800多,900多...

  • 步子太大容易扯着蛋啊

    正如步子太大容易扯着蛋一样,定的目标太大容易让人不想触碰。我把单词定为100个每天,直接app都不想打开了。因为如果定为100个...

  • 畅言评论系统的替换计划

    有关畅言评论模块。虽然现在国内大多数站点都用的是畅言评论模块。今天才知道原来是搜狐旗下的。怪不得搜狐新闻网文章底下的都是用的畅言...

最新文章

  • 如何找回带留言的公众号

    我们知道,从2018年3月开始,微信更改了公众号的留言功能开放规则,后面新注册的帐号都暂时没有了留言功能。至于什么时候开放呢?目...

  • 还是谈谈近期做网站的心得吧

    还是谈谈做网站的心得吧最近新做了一个站点,因为一些事情没有每天更新,然后今天去搜索资源平台(也就是百度站长平台)后台里看抓取频次...

  • 从垃圾分类的“灵魂六问”到“灵魂七问”

    来自上海阿姨的灵魂拷问:这段时间估计大家被这个刷屏了吧?就是你是什么垃圾。说实话,我超烦这句话,有好多服务号公众号直接用这个标题...

  • wordpress修订版本改成3次的方法

    在我们使用WordPress编写文章或修改文章时,WordPress会自动保存生成一个修订版本,如果一篇文章经过几次的修订,你就...

  • 谈谈换友链和发外链的感悟

    谈谈换友链和发外链的感悟最近换上了友链了,之前一直是好友的微录博客http://www.blogtextbook.com,他的博...