# 重新设计的现代风格 CSS 现已正式发布（2023.10.20更新） **URL:** \ **Category:** 词典装饰排版交流分享\ **Tags:** css, 改版\ **Created:** [2022 年10 月 7 日 10:15 UTC](https://forum.freemdict.com/t/topic/16055 "2022-10-07T10:15:57Z")\ **Posts on this page:** 20\ **Page:** 1
作者： ![startle](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/startle/32/22231_2.png) [@startle](https://forum.freemdict.com/u/startle)\ 发布日期： [2022 年10 月 7 日 10:15 UTC](https://forum.freemdict.com/t/topic/16055/1 "2022-10-07T10:15:57Z")
重新设计的《现代汉语词典》、《现代汉语大词典》、《新华成语大词典》、《古代汉语词典》、《牛津高阶英汉词典 10》的 CSS 现已正式发布。 非常感谢这些 mdict 字典的作者以及修订者的不懈努力与无私奉献！ ## 最近更新（v1.8.1） 更新日期：2023.10.20 - **[新]** 恢复之前 OALD 10 的点击区域。 - **[新]** 修复 OALD 10 折叠区域排版错乱的问题。 - **[新]** 适配《新华成语大词典》与《古代汉语词典》的深色模式。 - **[新]** 适配 OALD 2023.3 中的牛津 10，并优化排版。此次更新需删除 oald10.mdx，下载 123 云盘中的 oald.mdx，或者从 OALD 2023.3 原帖下载。 > **更早的更新** > > - 牛津 10：取消虚线 border，改为实线。 - 修复牛津 10 布局太过靠左导致有所遮挡的问题。 > > - 恢复现汉大图像版的 CSS。 > > - 对于牛津 10，修复无法调用可变字体其他字重的问题。 > > - 支持使用 SF Pro 作为默认英文数字字体，且优先级高于 Inter。请特别关注：SF Pro 与 Inter 十分相似，仅在一些地方有微小差别，但 Inter 是完全开源且可商用的。 > > - 对牛津 10 的 JS（`oald.js`）里的配置 config 进行了更充分的说明，以便于阁下的自定义。 > > - 支持从 config 中的 bulletList 中的 Emoji 列表中挑选 Emoji 以替换例句前面的小点（Bullet Point）。此项可在 config 中关闭。 > > - 更新牛津 10 的外观设计。 > > - 支持使用黑体（MiSans VF）作为主要字体。 > > - Windows 在不支持国旗 Emoji 的情况下，使用渐变圆角矩形+ 文字替代。 > > - 牛津 10 机器翻译的句子会在后面显示 AI Badge 提示此句子由 AI 翻译而非官方翻译。 > > - 牛津 10 修复词条分栏显示的 bug。 > > - 《现代汉语词典》修复链接独占一行的问题。 > > - 拼音采用 Inter 字体并激活单层 a 特性。 > > - 部分界面优化 ## 截图 ![IMG_2896](https://forumcdn.freemdict.com/uploads/default/original/3X/4/2/422032922f4f285a2cade11edf5e19ab382840cc.jpeg) ![1682498920112](https://forumcdn.freemdict.com/uploads/default/original/3X/3/8/38d7fecd85d36f238a8c371d3d5a009d25a92731.jpeg) ![IMG_2900](https://forumcdn.freemdict.com/uploads/default/original/3X/8/2/821f0b088288b73993e43d482f21413cbb49ca2a.jpeg) ![IMG_2899](https://forumcdn.freemdict.com/uploads/default/original/3X/9/1/91be239f5dbd7b0097dcfc90864f99d632fcce74.jpeg) ![1682498920096](https://forumcdn.freemdict.com/uploads/default/original/3X/8/b/8b3132fd5e93b4b32c7c035b31d3f066c15cda5a.jpeg) ## 下载 ### 途径 1 - 123 云盘 [123 云盘](https://www.123pan.com/s/GDVcVv-jo7q3.html) ### 途径 2 - 站内下载 [样式和脚本\_v1.8.1.zip](https://forum.freemdict.com/uploads/short-url/OCFcAAZGyD0tC1HGa7aJIfs1QP.zip) (43.2 KB) [采用黑体的样式\_v1.1.zip](https://forum.freemdict.com/uploads/short-url/zEofo9D4QABgW68cRbJ1F3IeS1o.zip) (1.1 KB) [Inter.ttf](https://forum.freemdict.com/uploads/short-url/dChbqxJxSPRGa512oUk6a20iHn3.ttf) (662.4 KB) [MiSansVF.ttf](https://forum.freemdict.com/uploads/short-url/zGwvrTVzoI4BJWgsT8hi0A24wCv.ttf) (18.7 MB) [思源宋体CN.zip](https://forum.freemdict.com/uploads/short-url/rHHw1HlaBbYmkSFMPPm64GQbcsa.zip) (14.7 MB) [天珩宋体.zip](https://forum.freemdict.com/uploads/short-url/5dS9iwKdOhAsBFHVTeabIBPAU0T.zip) (18.0 MB) [NotoColorEmoji\_WindowsCompatible.ttf](https://forum.freemdict.com/uploads/short-url/57rcFi1dOBZBbcQu6762Y776rVD.ttf) (9.9 MB) ## 使用说明 ⚠ 使用欧路词典：请在第一次进入欧路词典时进入欧路的设置， **清空缓存** 后再次进入欧路词典，否则样式不会被更新。 1. 对于四本中文词典，直接覆盖源 CSS，将字体文件（思源宋体 CN 与 Inter）放于每一 mdx 同级目录即可。 > **请特别关注** > 如果需要全局采用黑体（不包括极生僻字），你需要确保 `采用黑体_现汉大、成语词典、古汉.css` 与 `现代汉语词典7_黑体.css` 在 CSS 同级目录。 1. 对于 牛津 10，需要同时覆盖 JS 与 CSS 并复制 MiSans、Inter 或 SF Pro 或者 Google Sans Text 字体。 > **请特别关注** > 由于 Windows 不支持国旗 Emoji，你需要将 oald10.js 里的 config 变量中的 “displayCountryFlag” 属性设置为 false。 Google Sans Text、SF Pro 仅需与 Inter 二选一。Google Sans Text、SF Pro 由于版权无法提供下载，请自行下载。 > **版权与著作声明** > 《牛津高阶英汉词典 10》 CSS 最初源自 AnkiArrival 大佬的 CSS。 > 此样式仅供学习与交流，禁止用于商业用途。请于下载后 24 小时内删除。 ## 说明 我推荐使用思源宋体以获得最佳阅读体验。 1. 四本中文词典全面采用 思源宋体（可变字体）作为优先级最高的字体。对于思源宋体尚不能够覆盖的字符，除了现代汉语词典，均可采用天珩宋体来补充。 > 《现代汉语词典》部分生僻字符采用了私有区自定义字符，不一定与标准 Unicode 区兼容，所以不能使用其它超大字符集字体。 1. 支持使用黑体（MiSans VF）作为主要字体。 2. 拼音字体为了保持 a 是单层（one-storey），采用了 Inter 字体并运用 CSS 代码 `font-feature-settings: "cv11" 1` 以激活 Inter 的单层 “a” 特性。这段 CSS 代码对于其他字体很可能不会生效，请知悉。 3. 当然，你也可以保持原来的字体不变，只需要保证 ① 系统中没有 “思源宋体”、“思源宋体 CN”、“TH-Sung-TP0” 与 “TH-Sung-TP2”。 ② mdx 同级目录不存在 “SourceHanSerifCN-VF.ttf”、“TH-Sung-TP0.ttf” 与 “TH-Sung-TP2.ttf”。 ---
作者： ![hua](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/hua/32/11090_2.png) [@hua](https://forum.freemdict.com/u/hua)\ 发布日期： [2022 年10 月 7 日 10:58 UTC](https://forum.freemdict.com/t/topic/16055/3 "2022-10-07T10:58:48Z")
很好看。 ---
作者： ![yikelee](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/y/bbce88/32.png) [@yikelee](https://forum.freemdict.com/u/yikelee)\ 发布日期： [2022 年10 月 7 日 11:41 UTC](https://forum.freemdict.com/t/topic/16055/4 "2022-10-07T11:41:09Z")
天珩有些旧字形一直不改 ---
作者： ![hua](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/hua/32/11090_2.png) [@hua](https://forum.freemdict.com/u/hua)\ 发布日期： [2022 年10 月 7 日 11:53 UTC](https://forum.freemdict.com/t/topic/16055/5 "2022-10-07T11:53:16Z")
---
作者： ![扬州三月烟雨](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E6%89%AC/e56c9b/32.png) [@扬州三月烟雨](https://forum.freemdict.com/u/%E6%89%AC%E5%B7%9E%E4%B8%89%E6%9C%88%E7%83%9F%E9%9B%A8)\ 发布日期： [2022 年10 月 7 日 23:46 UTC](https://forum.freemdict.com/t/topic/16055/6 "2022-10-07T23:46:11Z")
最新的5.17版GH2替换css后，释义空白。 ![Screenshot_20221008_105209](https://forumcdn.freemdict.com/uploads/default/original/3X/b/5/b5d4058d12709e33c05f364595d009db8e388851.jpeg) ---
作者： ![yikelee](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/y/bbce88/32.png) [@yikelee](https://forum.freemdict.com/u/yikelee)\ 发布日期： [2022 年10 月 8 日 02:32 UTC](https://forum.freemdict.com/t/topic/16055/7 "2022-10-08T02:32:38Z")
CSS里 `unicode-range` 有点问题 天珩字体 **TP0** 是 基本区+扩A+扩G+扩H **TP2** 扩B-扩F （这个不用写范围） **TP0** - 4E00~9FFFF 3400~4DFF 30000~3134F 31350~323AF **TP2** - 20000~2A6DF 2A700~2B73F 2B740~2B81F 2B820~2CEAF 2F800~2FA1F ```auto /* 扩展区字符集字体，防止超集字显示方块 */ @font-face { font-family: "TH-Sung-TP0"; src: url(TH-Sung-TP0.ttf), local("TH-Sung-TP0"); unicode-range: U+30000 –3134F, U+31350 –323AF; /* 使用 unicode-range 限定此字体仅可被用作显示 扩G、扩H */ } @font-face { font-family: "TH-Sung-TP2"; src: url(TH-Sung-TP2.ttf), local("TH-Sung-TP2"); unicode-range: U+20000 –2A6DF, U+2A700 –2B73F, U+2B740 –2B81F, U+2B820 –2CEAF, U+2CEB0 -2EBEF; /* 使用 unicode-range 限定此字体仅可被用作显示 扩B-扩F */ } ``` ---
作者： ![startle](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/startle/32/22231_2.png) [@startle](https://forum.freemdict.com/u/startle)\ 发布日期： [2022 年10 月 8 日 03:59 UTC](https://forum.freemdict.com/t/topic/16055/9 "2022-10-08T03:59:06Z")
我是根据 [Mastameta 大佬在 7 月修改的古汉2](https://forum.freemdict.com/t/topic/11821/192) 编写的 CSS，所以可能没有兼容原版 5.17 的古代汉语词典。 ---
作者： ![startle](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/startle/32/22231_2.png) [@startle](https://forum.freemdict.com/u/startle)\ 发布日期： [2022 年10 月 8 日 04:26 UTC](https://forum.freemdict.com/t/topic/16055/10 "2022-10-08T04:26:33Z")
收到，感谢指出！ ---
作者： ![扬州三月烟雨](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E6%89%AC/e56c9b/32.png) [@扬州三月烟雨](https://forum.freemdict.com/u/%E6%89%AC%E5%B7%9E%E4%B8%89%E6%9C%88%E7%83%9F%E9%9B%A8)\ 发布日期： [2022 年10 月 8 日 06:03 UTC](https://forum.freemdict.com/t/topic/16055/11 "2022-10-08T06:03:12Z")
谢谢！原因找到了，是MDict版本问题，原来用的2.1.12版有问题，升级到最新 MDict\_2.2\_Beta4 ，即便mdx 同级目录有 “SourceHanSerifCN-VF.ttf”、“TH-Sung-TP0.ttf” 与 “TH-Sung-TP2.ttf”等字体也没有关系。 ![Screenshot_20221008_135334](https://forumcdn.freemdict.com/uploads/default/original/3X/4/5/453e62927e72c7db60bd20f02b3d76a06aa64352.jpeg) 另外，能否像现代汉语词典第七版一样，把“词头”和“相关词”分别放到两个色框里，岂非更加条理美观？ ---
作者： ![startle](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/startle/32/22231_2.png) [@startle](https://forum.freemdict.com/u/startle)\ 发布日期： [2022 年10 月 8 日 08:45 UTC](https://forum.freemdict.com/t/topic/16055/12 "2022-10-08T08:45:31Z")
已采纳建议并更新 CSS，请查收！ ---
作者： ![startle](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/startle/32/22231_2.png) [@startle](https://forum.freemdict.com/u/startle)\ 发布日期： [2022 年10 月 8 日 09:29 UTC](https://forum.freemdict.com/t/topic/16055/13 "2022-10-08T09:29:04Z")
我发现 MDict（软件）并不能完美支持我用到的所有 CSS 特性。如果可以的话，还是更推荐使用欧路词典以获得更全面的体验。 ---
作者： ![扬州三月烟雨](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E6%89%AC/e56c9b/32.png) [@扬州三月烟雨](https://forum.freemdict.com/u/%E6%89%AC%E5%B7%9E%E4%B8%89%E6%9C%88%E7%83%9F%E9%9B%A8)\ 发布日期： [2022 年10 月 8 日 10:05 UTC](https://forum.freemdict.com/t/topic/16055/14 "2022-10-08T10:05:05Z")
只是随口一说，先生却从善如流，不胜感激之至。新改版的效果在我看来美轮美奂，已是极品。谢谢先生不辞幸劳，惶恐之至。 🙏 ---
作者： ![扬州三月烟雨](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/%E6%89%AC/e56c9b/32.png) [@扬州三月烟雨](https://forum.freemdict.com/u/%E6%89%AC%E5%B7%9E%E4%B8%89%E6%9C%88%E7%83%9F%E9%9B%A8)\ 发布日期： [2022 年10 月 8 日 10:07 UTC](https://forum.freemdict.com/t/topic/16055/15 "2022-10-08T10:07:22Z")
谢谢，我是MDict和欧路两者兼用。 🙏 ---
作者： ![lisansas](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/lisansas/32/28149_2.png) [@lisansas](https://forum.freemdict.com/u/lisansas)\ 发布日期： [2022 年10 月 8 日 10:31 UTC](https://forum.freemdict.com/t/topic/16055/16 "2022-10-08T10:31:01Z")
相当好看，感谢 ---
作者： ![hahaya](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/h/77aa72/32.png) [@hahaya](https://forum.freemdict.com/u/hahaya)\ 发布日期： [2022 年10 月 8 日 15:51 UTC](https://forum.freemdict.com/t/topic/16055/17 "2022-10-08T15:51:47Z")
非常好看，谢谢楼主的改版！！ 反馈一个bug： 古代汉语词典2 原排版下，“南”字是有部首、笔画等附加信息的，用上您的排版后不显示了： ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/d/2/d2b956e905752ede013816875e6e4a4f7e834199.png) ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/0/7/07ded1b7b37d8e82c1308b4770c05cf147ebb892.png) 另外，能否把这几个词典的排版都弄得更紧凑一些，总感觉比同组的其他词典字体和间距稍大一些，个人建议哈~ ---
作者： ![hahaya](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/h/77aa72/32.png) [@hahaya](https://forum.freemdict.com/u/hahaya)\ 发布日期： [2022 年10 月 8 日 16:14 UTC](https://forum.freemdict.com/t/topic/16055/18 "2022-10-08T16:14:58Z")
兄台能否为ODE 2021([Ode2021外链修改版(2.19修复词条跳转问题)](https://forum.freemdict.com/t/topic/10904))做一下排版？ 目前的排版看起来不太美观： ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/8/7/874c499105d9d7a41abddb441fe56c78ac8d572c.png) ---
作者： ![yikelee](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/y/bbce88/32.png) [@yikelee](https://forum.freemdict.com/u/yikelee)\ 发布日期： [2022 年10 月 8 日 16:31 UTC](https://forum.freemdict.com/t/topic/16055/19 "2022-10-08T16:31:34Z")
![image](https://forumcdn.freemdict.com/uploads/default/original/3X/0/7/07bd211d2927f2d089f113019c7361d9e8410e1d.png) 这里出了点问题 😂 ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/0/9/0931124dd9a894f27b4ea4eb91b4282a4257df66.png) ---
作者： ![hahaya](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/h/77aa72/32.png) [@hahaya](https://forum.freemdict.com/u/hahaya)\ 发布日期： [2022 年10 月 8 日 16:35 UTC](https://forum.freemdict.com/t/topic/16055/20 "2022-10-08T16:35:11Z")
替换了牛津高阶的css和js，并装好misans和Inter字体后，发音图标的国旗不显示，beef词条内容在GD上显示成两排并列（不过好像也没啥影响） ![image](https://forumcdn.freemdict.com/uploads/default/original/3X/8/c/8c859289ad0c79841ff98bc4852361c27529aa26.png) ---
作者： ![mdxfan](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/mdxfan/32/31774_2.png) [@mdxfan](https://forum.freemdict.com/u/mdxfan)\ 发布日期： [2022 年10 月 8 日 23:14 UTC](https://forum.freemdict.com/t/topic/16055/21 "2022-10-08T23:14:33Z")
非常漂亮的排版！期待《汉语大词典》、《汉语大字典》、《王力古汉语词典》、《辞海》😊😊😊 我是不是想得太多了😂😂😂 ---
作者： ![startle](https://forumcdn.freemdict.com/user_avatar/forum.freemdict.com/startle/32/22231_2.png) [@startle](https://forum.freemdict.com/u/startle)\ 发布日期： [2022 年10 月 9 日 00:06 UTC](https://forum.freemdict.com/t/topic/16055/22 "2022-10-09T00:06:38Z")
是因为 JS 没有加载成功。 替换为国旗的代码是被包含在 JS 的。 [下一页](https://forum.freemdict.com/t/topic/16055.md?page=2)