模板讨论:Article

改进建议

最新留言：2020年7月31日 (星期五)2条留言2人参与讨论

由于一直使用着个人css所以没看到全局的css效果，这里基于我这边自己的css方案提一点建议：

 :root {
   --articlefont: Lora,'Palatino Linotype','Book Antiqua','New York','DejaVu serif','Source Han Serif','Source Han Serif SC'; <-- 使用思源宋体
 }
 .article-container{
   text-align: justify; <-- 使用两边对齐
   display: block;
   margin-block-start: 0.83em; <-- 这四行是从write.as复制过来的数据，应该影响不大
   margin-block-end: 0.83em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
   font-family: var(--articlefont);
   font-size: 1.2em; <-- 字调大一点为妙
   max-width:40rem;  <-- 用 max-width + margin auto可以实现一个比较美观的两边缩进
   margin-left:auto;
   margin-right:auto;
   margin-bottom: 1em;
   line-height:1.5;  <-- 行高好像作用似乎影响也不大
   white-space:pre-wrap; <-- 这个用来处理原生换行
   color:#111; <-- 颜色也是直接复制过来的，用纯黑也可以
 }

 .article-container h2,.article-container h3,.article-container h4,.article-container h5{
   font-size:1.5em;
   text-align: left;
   line-height:1.5;
   margin-top: 0;
   margin-bottom: 0;
   font-weight: bold;
 }

 .article-container h3,.article-container h4,.article-container h5{
   font-size:1.17em;
 }

 .article-container h3{
   width: 100%; <-- 个人觉得同宽就可以了
 }
 .article-container h4,.article-container h5{
   width: 100%;
 }

Ricolove（讨论） 2020年7月30日 (四) 19:14 (CST)回复[回复]

不推荐使用text-align: justify，这个属性没有统一实现方法，会造成未知的排版问题；比如在我的chrome浏览器上，两端对齐没·有·任·何视觉效果。
margin-left、margin-right、margin-bottom会分别覆盖margin-inline-start、margin-inline-end、margin-block-end...我知道这几个东西不一样，但是它们确实会互相覆盖。
~~font-size: 1.2em的话，可以把正文包进一个 big标签里面~~我觉得不错
font-weight: bold的话，只有h2不是默认粗体，真的要这么改吗？
white-space:pre-wrap div里面的源代码，可以使用两个换行来实现换行（Wiki默认换行），我先加上去。

除了3个（1、2、4）我个人觉得有问题的地方，其余的地方都改了。-- Salt · lovely ^论/_绩 2020年7月31日 (五) 00:17 (CST)回复[回复]