# 欧路词典（Eudic）字体解决方案 **URL:** \ **Category:** 技术交流与词典编修\ **Tags:** mdd, css\ **Created:** [2022 年9 月 14 日 16:44 UTC](https://forum.freemdict.com/t/topic/15356 "2022-09-14T16:44:17Z")\ **Posts on this page:** 20\ **Page:** 1
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 14 日 16:44 UTC](https://forum.freemdict.com/t/topic/15356/1 "2022-09-14T16:44:17Z")
许多词典或改版似乎都遇到恼人的字体问题，要么需要用户自行安装，要么你写好的精致主题不能被正常解析。谈一些相关经验，不足请指正。 总结：使用可变字体的 WOFF2 格式并放置于 MDD 根目录（仅保证 **欧路词典** 支持）。 * * * # 一、字体格式 实际上相较于我们熟悉的 TTF、OTF 等，还有一种为 WEB 而创建的字体格式—— **WOFF** ，经过编码工具压缩，大小一般比 TTF 小 40%，加载速度更快，可以更好地嵌入网页中。 **WOFF2** 是 WOFF 的下一代，提升了 30% 的压缩率。 # 二、字体选择 合格的词典版式必定包含了 **字形、字重、字宽** 等的变化，当你需要用到许多样式时，使用 **可变字体** 是个更优雅的方案。 可变字体是单独的一款字体，但可以表现为多款样式：全部的字宽和字重变化、几何倾斜、甚至意大利体，都可以被囊括在一个高性能、体积小的字体文件中。 哪里找？ **Google Fonts** 是个不错的地方，你可以选择只浏览 **variable** 的字体。 _至于 CJK（中日韩），我的想法是使用系统字体，不折腾。_ # 三、字体转换 意思是你下载的无敌可变字体可能是 TTF，你需要转换成 WOFF2。 请使用这个[工具](https://github.com/lencil/woff2_build)。 # 四、MDD and CSS ## 1. 怎么打包 MDD？ **务必将字体文件放在根目录！** 也不知道是我的问题还是欧路的问题还是什么问题总之放在二级文件夹的字体它就是用不了呃呃。 ## 2. 怎么写 CSS？ 请参考这篇[教程](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide)。 # 五、案例 一些[实践](https://forum.freemdict.com/t/topic/10568)。 # 六、杂谈 ## 图标字体 [Font Awesome](https://fontawesome.com/) 是一套图标字体库和 CSS 框架，在你的主题里使用伪类选择器，随时插入精致的矢量图标，并自定义大小和颜色，比嵌入 png 还鼓捣半天高太多了。 ## Pattern Library 两个质量非常高的 Pattern Library，供版式和配色参考。 [Mailchimp](https://ux.mailchimp.com/patterns/color) [Starbucks](https://www.starbucks.com/developer/pattern-library/guidelines/color/) ## 色彩对比度 一个[检查器](https://products.aspose.app/html/zh/contrast-checker)，看看你的精致配色是否适合阅读。 ## 国际音标字符（IPA） 大部分西文字体并不能很好地显示音标，如果你的词典有，会回退到可能不那么好看的字体，影响版面的一致性。 [IPA 简介（左边目录第三篇：《英语音标和 Unicode》）](http://www.fmddlmyy.cn/mytext.html) [解决方案](https://www.phon.ucl.ac.uk/home/wells/ipa-unicode.htm) ## AFDKO 命令行字体批量处理工具，你可以用来合并、精简字体等。 [项目地址及文档](https://github.com/adobe-type-tools/afdko) ## Lorem Ipsum 乱数假文，英文又称 Lorem Ipsum，是指一篇常用于排版设计领域的文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果，通常网站还没建设好时会出现这段文字。 [中文](https://pinkylam.me/generator/chinese-lorem-ipsum/) [英文](https://www.lipsum.com/) ## CSS Tricks [https://uiverse.io/](https://uiverse.io/) ---
作者： ![mdxfan](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/mdxfan/32/31774_2.png) [@mdxfan](https://forum.freemdict.com/u/mdxfan)\ 发布日期： [2022 年9 月 14 日 17:57 UTC](https://forum.freemdict.com/t/topic/15356/2 "2022-09-14T17:57:47Z")
搬个小板凳认真学习 ---
作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\ 发布日期： [2022 年9 月 15 日 00:36 UTC](https://forum.freemdict.com/t/topic/15356/3 "2022-09-15T00:36:58Z")
分享三个网址 > **[请使用逻辑正确的段首缩排](https://io-oi.me/tech/please-use-the-logical-first-line-paragraph-indents/)** > > 1 为什么文章开头要空两格？因为我们上小学时，刚在网格纸上写作文时，语文老师就一直是这…… > **[Web Typography | HTML & CSS Is Hard](https://www.internetingishard.com/html-and-css/web-typography/#paragraph-indents)** > > A friendly tutorial about web fonts and basic typographic principles > **[Neumorphism/Soft UI CSS shadow generator](https://neumorphism.io/#e0e0e0)** > > CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities. * * * 设计师都会Figma，可以去搜关键词找找文章借鉴。我看过一片figma的文章，大概就是去找现有的优秀实现，拿来直接用。（比如我们改css，借鉴物书堂、DONGRI、Pleco，比自己造轮子强） ---
作者： ![karx](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/karx/32/90668_2.png) [@karx](https://forum.freemdict.com/u/karx)\ 发布日期： [2022 年9 月 15 日 00:43 UTC](https://forum.freemdict.com/t/topic/15356/4 "2022-09-15T00:43:32Z")
棒！！！！！！ ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 02:00 UTC](https://forum.freemdict.com/t/topic/15356/5 "2022-09-15T02:00:57Z")
兼谈一点适用于词典的 **字体排印（Typography）** ，依然是想到哪里说哪里。 构建一套适用于 **标题、正文、编号、说明、注释、强调、引用等** 不同层级文本的包含 **字体、字号、字重、字宽和颜色等** 的字体系统。 构建一套 **平面网格** 系统。 一本书籍：[平面设计中的网格系统](https://book.douban.com/subject/26806997/) 比起做精美的色彩、图标、动效，我更多花精力于 **kerning, spacing and leading** ，毕竟词典的主体是文本，且是冗长、层级复杂的文本。 合适的 **缩进、换行、对齐方式、上下角标、斜体** 都可以让文本中的一些信息更易查找，帮助读者快速定位。 西文和中文有 **不同** 的排版规则，中英混排也有一些约定俗成的惯例，例如 **缩进、避头尾、标点挤压、单词断字** 等。 一个网站：[Type is Beautiful](https://www.thetype.com/) 一些书籍：[西文字体系列](https://book.douban.com/series/30758)、[孔雀计划系列](https://www.thetype.com/product/collection-research/) 基于 **WEB** 的页面呈现带来许多新的问题和机会（可以这么理解词典）。 例如使用 rem 作为字体大小单位，比使用 px 多了许多优势。 > 关于 rem 单位，来自 [6楼](https://forum.freemdict.com/t/topic/15356/6)的回复： > 词典的字体大小使用 rem 作为单位需要推敲下。因为词典会有重复的词头，软件会自己拼接 HTML，不同软件这块处理逻辑不一样。用 em 或者 px 表现会更稳定，不受词典软件本身的影响。 ---
作者： ![last\_idol](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/last_idol/32/2205_2.png) [@last\_idol](https://forum.freemdict.com/u/last_idol)\ 发布日期： [2022 年9 月 15 日 04:35 UTC](https://forum.freemdict.com/t/topic/15356/6 "2022-09-15T04:35:24Z")
> [@Moguer](#): > > 基于 **WEB** 的页面呈现带来许多新的问题和机会（可以这么理解词典）。 > 例如使用 rem 作为字体大小单位，比使用 px 多了许多优势。 词典的字体大小使用rem作为单位需要推敲下。因为词典会有重复的词头，软件会自己拼接HTML，不同软件这块处理逻辑不一样。用em或者px表现会更稳定，不受词典软件本身的影响。 ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 05:13 UTC](https://forum.freemdict.com/t/topic/15356/7 "2022-09-15T05:13:13Z")
感谢~ 请问您说的重复词头是指不同词典的同一条目吗？ ---
作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\ 发布日期： [2022 年9 月 15 日 05:27 UTC](https://forum.freemdict.com/t/topic/15356/9 "2022-09-15T05:27:40Z")
不是我写的，我就是偶然看到，这个作者好像也是翻译的英文博客。 我写css试过，有提升效果。特别是针对那些没标签的大段的文字。看着舒服一些些🤏 ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 05:37 UTC](https://forum.freemdict.com/t/topic/15356/10 "2022-09-15T05:37:04Z")
> **[The Type — Jan Tschichold 关于段首缩进的讲义](https://www.thetype.com/2008/12/525/)** > > 1926年24岁的 Jan Tschichold。Photograph: Thames and Hudson 最近忙完之后，重新读 Jan Tschichold 的《The Form of the Book》。现根据其中的部分论文，将主要的一些传统排版和字体使用的规则和 Tschichold 的观点归纳成系列。保守派设计爱好者比如我，对于这些规则十分钟爱，但设计至上者们也许对条条框框不屑一顾。无论何种情况，领会精神或者循规蹈矩，都仅供参考。... ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 05:58 UTC](https://forum.freemdict.com/t/topic/15356/12 "2022-09-15T05:58:47Z")
首先，我不是想用这篇小短文解释清楚西文排版中的段首缩进逻辑，只是想说明这样的“排版规则”有其历史渊源，演变成现代的段首缩进，也经历过许多的迭代和优化。 其次，如果您是从个人角度出发，认为排版规则“没有逻辑”，认为世上最知名的字体排印师的话“牵强”，只能说可能您并没有长期阅读到优秀的排版作品。 您觉得不合理的版式，也许正是英文环境的人所习惯的。 来自刚刚拍摄的《西文排版》： ![2022-09-15](https://forumcdn.freemdict.com/uploads/default/original/3X/b/8/b8025253ee2aeb04ddf658e536b1b7bbcf619150.jpeg) ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 06:04 UTC](https://forum.freemdict.com/t/topic/15356/14 "2022-09-15T06:04:30Z")
要我说得再明显一点？ 谁稀罕说服，这是一篇讲 **typography** 的贴，你在回复质疑一篇非常专业且正确的文章，而原转载的人似乎并不太清楚其中渊源。 我是在为该贴的读者说明。 至于你自己，爱缩不缩。 ---
作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\ 发布日期： [2022 年9 月 15 日 06:08 UTC](https://forum.freemdict.com/t/topic/15356/15 "2022-09-15T06:08:26Z")
你的照片真漂亮哦，羡慕 ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 06:24 UTC](https://forum.freemdict.com/t/topic/15356/17 "2022-09-15T06:24:42Z")
向 @douglarek 道歉，因为我看文章的不仔细。 情况是： 3楼的第一篇博文，实际上应该是倡导中文排版也向西文排版的“首段不缩进”看齐，但因为引用的参考是英文，再加上这本就是常见的段首缩进方式，所以我原以为该博文讲的规则是针对西文。 导致了一些不和谐。 在西文排版中，首段不缩进是被广泛使用和认可的做法。 但即使原博是中文语境，这也是一个值得商榷的问题，不能被粗暴否定，请参考该[知乎讨论](https://www.zhihu.com/question/19840594)。 ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 06:34 UTC](https://forum.freemdict.com/t/topic/15356/19 "2022-09-15T06:34:20Z")
咦叫我做史记的不是你？ ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 06:38 UTC](https://forum.freemdict.com/t/topic/15356/21 "2022-09-15T06:38:35Z")
我是真不想回了，结束。 ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 06:43 UTC](https://forum.freemdict.com/t/topic/15356/23 "2022-09-15T06:43:54Z")
哎哟，有点乌龙，头痛。 那篇文章是转载翻译，而且没转全，这种缩进规则懂排印的一看就知道是说的西文，而且也确实说的是对的。 歇火，刚刚小上头，对不起。 ---
作者： ![zambast](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/z/67e7ee/32.png) [@zambast](https://forum.freemdict.com/u/zambast)\ 发布日期： [2022 年9 月 15 日 06:45 UTC](https://forum.freemdict.com/t/topic/15356/24 "2022-09-15T06:45:19Z")
我觉得上面那篇说第一段段首不缩进的文章，看着似乎挺有道理，但是实际上我在中文排版里基本上没看到过这么做的，以至于我看到该文首段段首不空格觉得怪怪的。 与中文相似的日文，也基本上没见过这么做的（日文虽然小说之类的还保持了竖排，但是学术文章之类的横排也是相当普遍的，另外日文段首是空一格（大约），而不像中文是两格（大约））。 我觉得内在逻辑可能是还得考虑到一致性，如果首段不缩进，那肯定会有很多读者会注意到（因为与众不同）就会产生疑问，解释起来比较繁琐。 如果一种排版方式是那么的普遍，普遍到基本上你只能见到这种方式，然后说这种方式不合逻辑其实是错的，是不是有那么点自大呢。如果该文作者只是在解释英文排版的话，那没啥问题，毕竟我们对老外的不熟悉。但是这文作者明显在说中文也该这么做（该文自己就专门首段不缩进），这似乎只能作为一种特立独行，而无法作为权威，毕竟似乎该作者也不是资深的出版界人士。我觉得最好有这样的人士来解释一下。 ---
作者： ![shiruxue](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/s/bbe5ce/32.png) [@shiruxue](https://forum.freemdict.com/u/shiruxue)\ 发布日期： [2022 年9 月 15 日 06:46 UTC](https://forum.freemdict.com/t/topic/15356/25 "2022-09-15T06:46:04Z")
之前见过的字体打包mdd多是放在一个fonts文件夹里的 ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 06:50 UTC](https://forum.freemdict.com/t/topic/15356/27 "2022-09-15T06:50:27Z")
事实上这是[原文](https://www.internetingishard.com/html-and-css/web-typography/#paragraph-indents)。 显而易见这是一篇英文环境的文章。 当然也怪我……几乎不会有太多设计师关注中文语境的排版，所以我瞥一眼就默认这是西文背景了。 挺误导大众的。 ---
作者： ![Moguer](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/moguer/32/20527_2.png) [@Moguer](https://forum.freemdict.com/u/Moguer)\ 发布日期： [2022 年9 月 15 日 06:51 UTC](https://forum.freemdict.com/t/topic/15356/28 "2022-09-15T06:51:54Z")
是的，很多都在 MDD 里的二级文件夹里，但是我在 CSS 里引用字体带路径的话，软件就不能识别哎，也不知道是不是写法错了…… [下一页](https://forum.freemdict.com/t/topic/15356.md?page=2)