其中有几个关键的点,我们来详细解释一下。
1)支持微信公众号的两端缩进。
将p元素的padding-left和padding-right设置为1em(em是弹性布局单位,可根据页面基础的font-size「一般来自body元素」来计算实际需要的像素「px」单位)。具体示例如下:
p {/*段落*/
margin: 1.5em 0px;
padding-left:1em;
padding-right:1em;
}
2)支持微信公众号的文字间距。
letter-spacing表示文字之间的间距,暂定为1px。具体示例如下:
.output_wrapper/*此属性为全局*/
{
font-size: 16px;
color: #3e3e3e;
line-height: 1.6;
word-spacing:0px;
letter-spacing:1px;
font-family: "Helvetica Neue",Helvetica,"Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
}
建议:由于手机屏幕越来越大,文字的基础大小不需要再设置为15px了,需要换成更大一点的16px,人们阅读起来会更轻松一点。(所以设置全局的文字大小为font-size: 16px;)
3)支持行内代码换行。
一般情况下,中文会自动换行;但很多英文在一起的时候,文字间距会莫名其妙地增大,并且换行不及时。
怎么解决呢?需要在行内代码上加上word-break:break-all;(不仅中文换行,英文该换行也换行)。具体示例如下:
code /*行内代码*/
{
word-break:break-all;
word-wrap: break-word;
padding: 2px 4px;
border-radius: 4px;
margin:0 2px;
background:#f8f8f8;
font-size: 14px;
font-weight:normal;
}
需要注意的是,行内代码一定要使用反“``”包裹起来,例如:System.out.println("沉默王二不赞成996;996压榨人性,是效率低下的代表,就像回到农耕时代一样,日出而作,日落而息;效率才是解决问题的王道——可以坐飞机,别再骑马熬时间了!")
漂亮的排版
自定义CSS后的排版效果如下:
感觉排版怎么样?