部落格图文好读版: 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 诚挚希望耐心读到这边的您，能给我的版面一些宝贵的建议，让我有机会能把这个花园弄 得更漂亮 ^^ 也欢迎您随时过来走走，虽然我花种的不快～～ 但我会用心持续种下去的！ -- 我的脸书：https://www.facebook.com/Doctorhsia 我的网志：https://doctorhsia.blogspot.tw --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 114.36.178.138 ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Blog/M.1514200024.A.A41.html