CSS美化词典教程，WBD，Dictionary.com，Vocabulary（07.31夜间风格）

wa1314159 · 发表于 2016-7-28 18:05:24

本帖最后由 wa1314159 于 2016-8-3 17:45 编辑

对论坛模版的美化建议：行距调至135%－150%， Discuz! 编辑器不支持css，只能在论坛后台调整

07.31更新
1.代码编辑器夜间风格示范
2.Vocabulary.com.css 修复All Sources弹出菜单透明

坛里词典制作教程已有不少，然而词典美化教程及美化标准的讨论一直未见。
大家之前的着重点在于完善词典种类及数量，如今论坛词典已相当之丰富，可以注重于制作最美的词典，只需要多花费一点点心力，对照字体和颜色标准就可以摇身一变啦。
发一简单美化教程抛砖引玉，大家不要被css吓到，只需要熟悉font，color这几个基本属性就可以动手美化啦。

1.字体

正文字体及全局行距值建议

这一项更改最重要，一般在css文件第一行，大部分字典行距只有115%，只改这一项阅读体验都会强很多

音标字体及样式建议

CharisSIL字体下载地址

Charis SIL，一种非常完备的国际字型，包含了拉丁字母、希腊字母和斯拉夫语字母，外观像罗马字体（Roman，在视窗则中则为「泰晤士报新罗马体」Times New Roman），包含正常体、斜体和粗体。除包括了完整的国际音标字元外，还有加进了声调符号和最新的唇齿弹音音标，以及预先结合附加符号的音标，和很多非标准的音标符号。

例句及非正文字体建议

需要突出的短语等内容的样式建议

2.颜色（建议以我发布的css作为参考，个人最喜欢的配色）

http://www.color-hex.com

http://www.colourlovers.com

3.工具

mdd解包推荐工具

mdd打包教程见软件区置顶贴

最简单应用CSS的方法

html CSS在线编辑

发现用chrome和插件Chrome DevTools编辑css超级方便，强烈推荐

4.效果

5.下载

mdd美化文件下载

bdpt

Ẃȯɾlƌ Ɓơơƙ Dictionary

Dictionary.com Unabridged

Dictionary.com Unabridged离线发音版

Vocabulary.com离线发音版:

WBD.css.zip (1.94 KB, 下载次数: 339)

Vocabulary.com.zip (2.36 KB, 下载次数: 639)

6.分享

分享mdd音源文件替换欧路词典自带粗糙发音方法

Vocabulary.com 14万真人美语发音

[email protected] · 发表于 2016-7-28 19:05:48

谢谢楼主。。。。。。

bt4baidu · 发表于 2016-7-31 14:07:30

wa1314159 发表于 2016-7-31 13:37
字体和颜色偏好确实因人而异啦，本帖美化毕竟是按我个人喜欢的风格来写的，Lucida Grande我会标明只是个 ...

颜色尽量活泼一点比较好

早先我也喜欢用比较清淡、单调的颜色，看起来比较清爽
但是在实际的使用场景中，这种配色反而容易让人昏昏欲睡，慢慢地失去查词典的兴趣

所以后来再做词典，越来越倾向于使用比较丰富的色彩，甚至略微带点刺激的颜色，比如“大红”、“深红”，有提神的效果
尤其是看了一大篇英文之后，头昏脑涨，此时去查词典，活泼的配色和之前单调的黑白色产生强烈的对比，会让人顿时心旷神怡
不信？找本英文原著试试看

bt4baidu · 发表于 2016-7-31 13:08:38

很奇怪大部分字典的默认正文字体都是Lucida Grande，但Lucida Grande显示效果实在不佳!

Lucida Grande很漂亮啊，Mac OS X 9以及之前版本的系统默认西文字体，谁敢怀疑乔布斯的眼光？

在windows上显示效果也不错，是否没有安装该字体，导致系统显示了默认字体？

另外Google家的open sans字体也很漂亮，只是大部分系统默认都没有，得自己安装

小众字体尽量不用，因为平台兼容性不好，百度“Web安全字体”

skydan05 · 发表于 2016-7-28 18:06:11

谢谢wa1314159！！！

yangxiups · 发表于 2016-7-28 19:19:13

What a beauty！

necuser98 · 发表于 2016-7-28 19:40:20

谢谢楼主分享

wsxzyz · 发表于 2016-7-28 19:53:31

试一试这个排版，多谢了

秋天故事 · 发表于 2016-7-28 22:35:49

感谢LZ的优化和分享~

knetxp · 发表于 2016-7-28 22:49:02

非常完美，很清爽漂亮

wawxing · 发表于 2016-7-29 06:35:28

本帖最后由 wawxing 于 2016-7-29 06:40 编辑

正文和音标字体请兄台考虑一下DejaVuSans或者FreeSans或者Segoe UI。
Helvetica Neue在有的GoldenDict版本里面不能显示，而且字符太少。
Georgia做音标字体在有的字典里面缺少音节分隔符和次重音字符。
字符‧和ˈ和ˌ都没有。不如CharisSIL。

zhyli · 发表于 2016-7-29 06:50:05

楼主讲的真专业，厉害！

iatr · 发表于 2016-7-29 07:20:42

本帖最后由 iatr 于 2016-8-4 06:17 编辑

thanks for sharing

woaini123 · 发表于 2016-7-29 07:53:58

支持，谢谢让我们的词典变得这么美！！！

HMPT · 发表于 2016-7-29 08:30:52

好贴,
每次看css 直接头晕啊

fox2599 · 发表于 2016-7-29 08:59:27

赏心悦目的感觉，给人以视觉享受啊。

zoeyma · 发表于 2016-7-29 12:08:23

楼主这配色好棒啊

fanziyu · 发表于 2016-7-29 16:06:54

本帖最后由 fanziyu 于 2016-7-29 16:10 编辑

不同人就有不同的喜好，有的喜欢用Lucida Grande，我个人就属于不太喜欢Lucida Grande那类，感觉看得不舒服，每每看到都忍不住解包出来自己改掉。

sculiuchang · 发表于 2016-7-29 16:16:33

iatr 发表于 2016-7-29 07:20
這（顏色）配置，感覺較為樸素，
在手機上看，長時間下來，是不是有抑藍光，護眼效果呢？

偶也有同感。

zoeyma · 发表于 2016-7-29 18:44:03

请问苹果字体文件要改名吗？还是直接复制到系统字体里改权限就行

jiangws · 发表于 2016-7-29 19:58:26

谢谢，总结得很好。

lxchen2001 · 发表于 2016-7-29 22:01:29

谢谢楼主提供苹方字体和介绍。

手机上哪一款中文字体最合适？小米兰亭怎样？

wa1314159 · 发表于 2016-7-29 22:27:32

lxchen2001 发表于 2016-7-29 22:01
谢谢楼主提供苹方字体和介绍。

手机上哪一款中文字体最合适？小米兰亭怎样？

手机中文阅读我习惯用多看，我是把“苹方黑体-准-简.ttf”导入多看的，
我比较偏好细笔画的字体，兰亭对我而言就显得太粗太重，而且宽度大于高度，不够方正，
具体选择还是看你自己的对比体验咯

644830104 · 发表于 2016-7-29 22:44:55

这是我见过最棒的教学贴之一，bro you are awesome!!!

865052004 · 发表于 2016-7-29 23:06:09

楼主，做的真心漂亮，可以参加A大的美化报名。

kyletruman · 发表于 2016-7-30 01:37:05

本帖最后由 kyletruman 于 2016-7-30 01:38 编辑

这个帖子对学习css帮助太大了，感谢楼主的耐心讲解！

[改版] CSS美化词典教程，WBD，Dictionary.com，Vocabulary（07.31夜间风格）

评分

本帖被以下淘专辑推荐:

点评

点评

点评

点评