您现在的位置是:

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

Jkay 10-23 18:08:14 702

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

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

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

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

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

代码如下,(加在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个...

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

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

  • 网站文章图片大更新

    《网站文章图片大更新》诗歌天地栏目的图片计划:如果没有好图那就直接设置缩略图吧(昨天升级了站群体验版,发现多了自定义缩略图功能,...

最新文章