让xiu主题显示字体样式更加易读,在后台外观->编辑中编辑style.css
Xiu主题一些css格式作用说明:
line-height 行高
font-weight 字宽
.excerpt h2 主页显示的标题2
.h1,h2 文章内标题
2em=2*font-size
.article-content h1文章内容里设置的标题1,标题2
1. body增加字体设置,苹果mac平台首选萍方,windows平台微软雅黑。
font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
2. body, button, input, select, textarea 修改font配置,删除原font-family配置行
萍方繁体版也带有一套简体字,很漂亮,需要的可以试试,加在font-family最前面即可:PingFang TC
font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
letter-spacing: .034em;
字体颜色#2f2f2f 保证清晰易读。
3. .article-content 修改字体大小
.article-content {
font-size:17px; /* 改字体大小 */
line-height:25px;
word-wrap:break-word!important; /*break-word;*/
}
.article-content p {
line-height: 2em;
margin: 0 0 2em; /*margin-bottom: 25px; 2019-01-17*/
padding:0px 10px; /* 内容左右的边距 */
text-align: justify; /*中文排版,字体宽度略宽*/
}
为了移动端的阅读体验,增加内边距设置,使字体与屏幕两侧的距离增大。padding:0 10px;
4、手机适配适当增加首页文章列表标题字体大小
比如:我的iphone7 ,适配的是 @media (max-width:380px)
修改后: .excerpt h2{font-size: 16px;line-height: 1.3em}
5、文章内标题的内边距和字体大小更改
6、wordpress新版本图片居中问题
/** 181224 block与vertical-align不能使图片居中 */
.article-content img{margin: 5px 0; display:inline-block;max-width:100%;height:auto;padding-bottom: 25px}