部落格图文好读版: https://doctorhsia.blogspot.tw/2017/12/Font.html
初心者从零开始的部落格纪录（二）：选择合适的排版与字体
夏绍刚
本周日（2017.12.17）由邱品齐主任领衔主办的“社群经营与创新卫教分享会”，果然我
预期，跟前一场同样的～～有种、有趣、有料！（恩，还是换个台词不然等下罗胖告我抄
袭 XD）
有内涵、有趣味、有启发！
真的是太不虚此行了 :D，加上敝人自己的随意窝懒散荒废了一年多，于前一场“简报设
计／演讲技巧分享会”时被激励到，决定再启动部落格计画之后，一个多月下来也累积了
很多实作上的疑问，有些在课堂上获得解决，有些在课后私下向讲师讨教得到答案，实在
太棒了 ^^v
因为本次会议已经陆续出现很多强者的心得文章及影片分享（如王筱涵医师、欧淑娟医师
及如识我闻等），所以“心法”部分暂不多言～～
本篇主要分享本人多方讨教学习和自我摸索出来的相关“技法”。
※ ※ ※ ※ ※ ※
文章段落编排的部分，邱品齐主任首先提到现在的人们多半是用手机阅读，非常视觉导向
，善用图片吸精很重要；而且文章不要长篇大论，要适度增加断行及分段，尽量不要一大
团字糊在那边，不然点进来的人一看就被吓到，往往就直接 END 上一页了。
黄婉茹医师整理了文献资料，并且实际地统计了自己的部落格流量数据，与主任同样提及
，使用行动装置的客群占了大多数，建议大家使用较适合手机阅读的格式；且在
Blogger 上安装 Google Analytics 进行统计，可以了解自己的客群（受众），进而精
准写出合乎读者胃口的文章。
由于我这个人的个性比较囉嗦（应该说是非常囉嗦 XD），所以先前的文章有越写越长的
趋势 ORZ （希望这篇开始能改善 QQ ......校稿时看到这一句发现并没有改善）。我查
看流量纪录时，发现最近的两篇读书心得＜最有生产力的一年＞和＜惊悚乐园＞的点击率
明显高于卫教文章，在PTT的 Fantacy 版和 Book 版的回馈也非常多，文章还被版主加
M ，当然卫教文章是相对生硬些没错，但我觉得更重要的一点是......
这两篇就是介绍书籍和网络小说的文章～～所以发长文当然可以吸引到这些本来有阅读癖
的相关受众啊 XDDD
游懿圣院长在课后聚会时，也提醒我说 Blogger 内文可善用“子标题”，不但凸显文章
重点，也可增加分段区隔性；其实这段时间内陆续也有很多朋友跟我提醒我的排版问题，
所以会后当天我立即决定从善如流，学习大神们的排版法，将先前十四篇文章的版面进行
大修整～～
用“子标题”凸显重点，把段落再拆分开来，阅读上顿时变得和蔼可亲很多！
因为子标题一直会吃掉下一段的前两格空格（之前就是因为这个排版上的麻烦点所以没用
子标题），索性把文章里面所有的首行空格都手动删除了，直接空一行当段落，更加简洁
明了－－幸亏在少许文章时早点来听课，不然真的不是两小时可以改完的 XDDD
另外我在浏览很多其他高人气部落格时发现，内文的重点凸显方法大多用“加粗字体”的
方式，而不是我原本使用的“变色字体”（我选深蓝色），而即便有用变色字体也不会太
多；我使用了比例较多的变色字体，再加上我文章里相对较多的超连结文字，这样看起来
版面会有点凌乱 QQ
因此，从本篇起我尝试改用少量的“加粗字体”来作内文强调，希望大家在阅读文章后能
给我一些回馈 :D
※ ※ ※ ※ ※ ※
字体设定部分，在网络上的讨论非常多，如社技哲学、WFU BLOG、Justfont blog、
Jimmysu's logdown、妖精的号角等，文章的含金量都很高，十分值得有兴趣的朋友去看
看。
字体的可变设定主要为下列这几项：
１﹒字体尺寸（Font-size）
多以像素（PX）作单位，为求接口简洁，不建议整体版面用太多不同字体尺寸的变化（应
限定在五种以内）；并需考虑到大部分人用手机屏幕阅读，不应选择太小的内文字体。
原本 Emporio 默认主题在字体大小的变化较多，我将大部分内文字体改为 16 PX（这也
是多数手机浏览器默认的内文字体尺寸）；文章标题选择比较多人推荐的 24 PX。
Blogger 在后台设定区可以直接点击修改各个部分的字体尺寸（主题 → 自订 → 进阶）
。
P.S. 字体尺寸还有其他设定单位，如排印单位（PT，Point）、排印点数（EM，原先的定
义是在金属活字中大写 M 的宽度，数位印刷后变成一种相对性的单位）及百分比（%）等
，在此不赘述，有兴趣的朋友可以点连结看比较文。
２﹒行距
行距（Leading）又称行高（Line-height），是指“从上行的基线到下行的基线”的距离
，再说白话一点，就是“一行字本身字体高度加上与上面另一行字之间的空白区”，命名
起源来自于铅（Lead），因为金属活字时代会将铅块插到行与行间来增加空白区域。
行距太密会使文字太过拥挤不易辨识，行距太散又会导致整篇文章过于松散，两者都会影
响可读性！一般会建议将字距设定为字体尺寸的 1.5 - 1.7 倍，如本人用 16 PX 的字体
，就应选用 24 - 27 PX 的行距，加上考量手机阅读的舒适度，实测后我选用 27 PX 的
行高。
Emporio 主题的可由后台区直接点击调整行高（主题 → 自订 → 进阶 → 发表文章 →
文章文字行高）。
３﹒字距
字距（letter-spacing）就是字与字中间的距离，一样过密过疏都会影响阅读！
网络上对字距的建议就比较不一，同样的 16 PX 的字体尺寸，从 0.8 - 1.4 PX 都有人
支持；个人认为字距的选择上，比起行距只需单纯考虑字体尺寸来说，应该还需要合并考
量到整体版面宽度的对应关系，所以没有一个特定的黄金数值（所谓的“行距＝ EM / 5
”的说法是适用于英文字体排版而不是中文字体喔！）。
字距在大部分 Blogger 主题上，需要使用 CSS 语法修改（主题 → 自订 → 进阶 →新
增CSS），简单有关字体尺寸的设定可以这样写：
.post-body { （post-body就是指内文字体）
font-size: 16px; （字体尺寸）
line-height: 27px; （行距）
letter-spacing: 0.8px; （字距）
}
BUT～人生最无奈就是这个BUT！
我一直用 CSS 语法改来改去，怎么看都觉得不满意（主要是字列对齐上出问题），后来
查到 WFU BLOG 上的文章提到， Emporio 是 Blogger 新推出的自适应主题（RWD，
Responsive Web Design，响应式网页设计），文章版型比例会随着萤幕大小变换，所以
若在 html 或 CSS 里贸然修改任何与有关宽度的设定都可能会导致版面呈现受到破坏
ORZ
因为我很喜欢 Emporio 主题的呈现方式，而且上篇有提到我已经换过一次主题了，实在
不想再忙活一次 @@
所以绕了一大圈，我删掉所有与字型尺寸有关的 CSS 语法。
４﹒文字颜色
内文文字颜色建议采用默认的黑色（色码：#000000），而用来强调内文或标题等处的变
色文字部分也不应选择过亮的颜色，会导致阅读不适；顺道一提，版面的背景颜色可考虑
用浅灰色（#eeeeee），看起来相对柔和，比一般默认的纯白背景，阅读感更佳，读者眼
睛比较不会疲劳。
版面颜色部分也可在后台设定区可以直接点击修改，其实 Blogger 主题默认的几种背景
默认配色就很不错了。
５﹒字体的变体－－加底、斜体与字重（Font-weight，代表字体的粗细）
这三种变体都是内文的强调方式，个人不建议使用加底，因为它无法作到真正视觉意义上
的强调效果；也不建议使用斜体，因为中文字体往往不像英文字体有特别另外制作斜体字
型（Italic type），而多是程式演算出的伪斜体，看起来会有些违和，且破坏版面的整
齐度。
善用加粗字体可能是较为理想的强调重点方式，当然不建议全篇内文使用正常（默认）以
外的字重，会严重影响阅读体验，应仅在某些重点部位使用加粗字重（Bold），达到吸睛
效果，但也不能在内文加粗太多的地方－－太多的强调等于没有强调－－另外需注意应选
用有字重个别设计的字型（如微软正黑体），不然也会有“伪粗体”问题！
加底、斜体和加粗在 Blogger 编辑文案的上方就可直接点选，使用上很方便。
６﹒字型（Font-family）
选择适当的字型也是让文章吸睛的一个大重点，林政贤院长在“简报设计分享会”中有提
到“无／有衬线字型”在选用上的大原则～～
无衬线字型（Sans-serif）－－文字的笔划端点没有多余的装饰，笔划粗细一致，给人稳
重踏实的感觉，便于辨别，可用于标题和专业性文章。
有衬线字型（Serif）－－文字在笔划端点进行修饰，笔划粗细有变化，给人经典优雅的
感觉，阅读起来较为舒适，可用于大部份内文。
大多建议不应在同一个版面上选用三种以上的字型。中文字和英文字一并呈现时，也需对
应性的同时选择有或无衬线的字型，如此可让版面更为整齐。
BUT～人生最无奈还是这个BUT！！
Blogger 终究是 Google 的免费平台服务（想增加自己曝光度可以给 Google 钱啦，当然
我是不会给的XD），因此在内文编排上相对阳春，只能在后台选定单一种内文字型，而不
能在编辑文案时进行调整，甚至还没有提供中文字型的选项！
若读者的浏览器默认字型是微软正黑体那还好些，但如果跑出来新细明体或标楷体，文章
给人的质感就会差很多。如果我们想要优化字型部分，只能从 CSS 语法着手， WFU
BLOG 的文章中介绍了排列规则，简单说就是：
－先英文字型再中文字型
－中文字型要同时列上它的英文名称，增加被系统辨识机会
－尽可能顾及各个平台，Linux → Mac → Vista → XP → 通用字型
我后续再参考了 PTT 上的建议，实测后感觉不错，目前我使用的字型 CSS 语法为～
～
.post-body {
font-family: Consolas, Ubuntu, Arial, "俪黑 Pro", "LiHei Pro Medium", "文泉驿
微米黑", "WenQuanYi Micro Hei", "微软正黑体", "Microsoft JhengHei", "标楷体",
DFKai-SB, sans-serif;
}
※ ※ ※ ※ ※ ※
设置部落格的版面，就像打造一个花园。选用系统默认甚至花钱订制的花园，让自己专注
在种花（产文）上很不错；而在资（不）源（想）有（花）限（钱）的基础上，尽量找资
料学习（讲真的......这些网络语法对我这个非本科生来说实在跟天书一样啊 @@），完
成版面的优化，也是一种乐趣！
人生也是如此，或许在尝试的过程当中，走了一些歪路，碰了一些墙壁，但我们也因此多
看了一些风景啊 :D
诚挚希望耐心读到这边的您，能给我的版面一些宝贵的建议，让我有机会能把这个花园弄
得更漂亮 ^^ 也欢迎您随时过来走走，虽然我花种的不快～～
但我会用心持续种下去的！