来来来，我们讨论讨论那玄学又令人痛恨的网页排版问题（逃

[reuixiy]

起因

来自我的一个帖子： https://www.v2ex.com/t/485241

因为我那博客比较任性🌚，引出了些有趣的回答……

讨论

包括但不限于：段间距与首行缩进，serif 与 sans-serif，font-family，页面宽度，每行字数，行间距，边距，字体大小，字体对齐方式，woff2 ……

段间距与首行缩进

我先占个坑，这是那个帖子最后引出的问题。

你可能发现买到的纸质书大部分都是首行缩进，但首行缩进在网页排版中却少见……

下面是我 Copy 自那个帖子过来的：

首先，为什么要分段？这好像是小学老师就教过的哈哈，我就不重复了（逃），自行回忆。会写博客的应该有所体会，我个人觉得应该有以下几点需要分段：

1. 不直接相关；
2. 是并列关系；
3. 有一定转折。

如你想强调一个词时，就用粗体来体现，行文上有这些表达需求，排版上也要将这些表达体现，方法就是分隔，也就是打破原有的一字连一字。另外一个视角，读者视角，想象下无段间距也无首行缩进的繁密恐惧，分隔后阅读不累。

分隔的原因已知晓，接下来分隔的两种模式：段间距和首行缩进，各自特点：

1. 段间距排版，段间距大于行间距，间隔较大，结构简明；
2. 首行缩进式，段间距等于行间距，上下相连，繁密易懵。

所以呢，下面是我的个人建议。

如果是文档、技术文章、新闻、网络小说等等，要的只是将信息迅速传达给读者，果断段间距排版，简明。

如果是逻辑严密、上下文紧密联系的文章，建议首行缩进。怎么说，想想代码的缩进，20 行无空行的一段代码，试试每行之间加上一空行或一 Tab 键 16 空格，阅读效果怎样？（省略一大堆尼玛）

如果是文学类（诗例外），建议首行缩进。怎么说，我一句话评论吧，段间距不如首行缩进优雅。其实挺好理解吧，可以想象两个场景：

场景一：

-----------------------------
嗯，嗯，嗯——

尼玛！？

嗯，嗯，嗯……
-----------------------------

场景二：

-----------------------------
嗯，嗯，嗯——
嗯？嗯？嗯……
-----------------------------

最后，想对用了段间距还硬用首行缩进的网站说：你个傻逼玩意！

以上皆为我的个人拙见。（貌似又可以水一篇博文了 2333 …）

另一个常见的排版问题就是字体究竟是 serif 还是 sans-serif ？

emmm …书没看过，倒是浏览过一些很棒的网页：

1. https://wanderer.tw/簡單做好中文排版 /
2. https://hanzi.pro/manual/zhangjie_de_bianpai
3. https://yihui.name/

——

1. https://www.voyax.me/posts/59710/
2. https://blog.coding.net/blog/Web-Fonts

——

1. https://www.zhihu.com/question/27391851
2. https://practicaltypography.com/
3. https://thetype.com/

还有两个来源请求：

1. 是一个博客，说法好像是网页上首行缩进有必要没？
2. 知乎还是哪，说衬线字读起来没非衬线字那么累，反正我被说服了……

开场

……（逃

[ynyounuo]

抛去 serif/sans-serif 的问题，您网页中的方正字体都经过授权了吗？


没记错的话，Livid 之前分享过的方正字体讨论主题下有人明确咨询了是否可以在个人博客使用未授权方正字体的问题。

[dototototo]

先行收藏，看看大家会有什么有趣的见解，话说楼主的博客我也是看到上个帖子刚收藏的～

其实我觉得还有一些可以讨论的，比如用什么样的引号，看到很多博客都喜欢用直角引号，不过我个人因为输入习惯的问题所以一直用的是“和”。

还有中英文数字混输，这里能说道的也不少呀～

[kerr92]

@ynyounuo 方正楷体简体应该是可以用的，官网的意思甚至可以免费商用……

> 免费字体：包括四种字体：方正黑体、方正书宋、方正仿宋、方正楷体。针对“商业发布”这种使用方式免费。

来源 http://www.foundertype.com/index.php/About/bookAuth/key/my_sysq.html

[reuixiy]

@ynyounuo 感谢提醒。

搜了搜，是这贴子吧： https://www.v2ex.com/t/355190

@kerr92 感谢回复。

首先我是尊重版权的，我的那博客目前的确用了方正的两种字体：方正书宋和方正楷体，皆属于官网的「免费字体」，而下面有“免费字体……针对‘商业发布’这种使用方式免费”这条。

但看了下官网，「内置使用」中有“以嵌入的方式应用到网站”一条，也就是说我使用的方式应该属于「内置使用」，而非「商业发布」，但官网却没有「内置使用」的相关说明。

下面解释第 7 条，又有“以嵌入的方式应用到网站”一条，查看说明的“解决方案”之“嵌入式系统”： http://ifont.foundertype.com/index/embedfont.html

无相关说明。

唉，怎么说，我那博客主要也是自己笔记看看，看着方正的这两款字体在手机上显示效果的确很棒，就用在博客了，自己回顾时看着也舒服……但如果即使这样，也构成侵权，马上改思源字体吧……

[ynyounuo]

@reuixiy
免费的应该没事吧，可以问问。embedding 应该是指 PDF 里嵌入跟网页也许没关系。

[reuixiy]

@dototototo 好耶，这个的确，直角引号？「」这样的？我倒是没多见，国内主要还是用“”吧，用「」估计是有另外表达需求。

不过符号确实有很多要注意的，目前我遇到的：

1. ' 与 ’，这个是一痛点，好像英语的标准是后面这个，英文字体下显示没问题，但中文字体下显示很难看，变成全角单引号后一半效果（遇过应该懂），我目前的解决方案是直接使用前面的；
2. · 与 •，这也是痛点，就是一些老外的中文名字中间有这个，那么究竟是前面还是后面这个？维基上说大陆标准是前面这个，但目前常见黑体前面这符号都是半角的，显示效果贼差，不同字体好像也不同，方正书宋前面那个是全角，思源宋体前面那个是半角，后面那个却是全角；
3. - 与 − 与 —，第一个是常用的，也是直接可以键盘输入的，但负号能用它吗？几几年到几几年能用它吗？我告诉你，第二个是减号（负号），用法不用说，第三个是连接号，用法示例：1984 — 2018。

包括但不止上面三种，维基上有一个侧栏上比较全： https://zh.wikipedia.org/wiki/连接号

上面“维基上说”的来源： https://zh.wikipedia.org/wiki/间隔号

[reuixiy]

@ynyounuo 嗯嗯

[dototototo]

@reuixiy 太巧了，我上次看到篇文章就提到了你说的这些问题，可以看一下： https://sspai.com/post/45516

[kerr92]

@reuixiy 突然发现自己没细看，误解了“商业发布”的含义。

最后，强烈希望金主 Google 能继续掏钱让 Adobe 开发思源楷体和思源仿宋……

[reuixiy]

写了篇文章： https://git.io/fAuVB