GoldenDict如何建立article-style.css并设置字体？[动图示例]

Oeasy

7 a+ G# X1 U  T5 k2 w' _& v: F0 R
, l4 S. C* |4 A  w! ^; l7 u# GoldenDict 如何建立 article-style.css 并设置字体？[动图示例]
$ ~1 J( \. n" C' b
6 n  o4 N2 z+ }& g! y* c刚使用 GoldenDict 的朋友会问一些很基础的问题，今天有朋友问“GoldenDict 如何设置字体”。
其实已经有一些帖子了，我这里再发一个，“精心”录制了 gif ，希望能对新人有所帮助。这些简单的问题，真·大神从不讲，我也是一步一步知晓这些细节的。知道新人的苦，新手的泪，所以也不厌其烦，写了些看上去很“弱”的入门贴，希望对大家有所帮助。
: w8 n0 f7 m. W3 {% z/ Q
-  GoldenDict 界面显示风格、字体、背景等等的修改 https://pdawiki.com/forum/thread-14082-1-1.html
) d8 C- R- j( T- [GoldenDict] 如何为某部词典指定字体？ https://pdawiki.com/forum/thread-15900-1-1.html
; ^, L4 w3 R# I1 ~3 D& I/ L& k5 A
7 u9 j0 C, Y5 N3 |1 K2 v看不到 gif  ，点不开大图 https://s1.ax1x.com/2018/02/05/9KWRqx.gif 。
注：点击图片可查看大图，更清晰。
               
' Q, ~- H# N1 N" l

' b- K4 P: ~; J- C
( h0 k% v7 {2 V' X! j  ?2 z* e& E## 文字版步骤：
" U" N! D, d: E4 I" c& N' J. }6 E步骤看上去很多（6 步），其实很简单，我只是写得尽量详（luo）细（suo）而已。你会打字，会上网，会吃饭，那下面的步骤，3 分钟搞定。
6 J7 {- b5 \# n8 U( b) M# k
  Z; x& o5 X9 Y1 i1.  GoldenDict 菜单栏，依次点击【帮助】->【配置文件夹】，自动就蹦出文件资源管理器窗口（macOS 蹦出 Finder 窗口），定位到了配置文件夹。如果你按照这里的步骤第 3 步做了的话：
        -  “GoldenDict 下载、安装、使用入门教程[Windows 版]” https://pdawiki.com/forum/thread-14072-1-1.html ，第 3 步 “新建 portable 文件夹”
9 v6 U  L/ b& L- |) D“配置文件夹”就是 portable 文件夹。

/ ?- t" d9 k( x: K2. 在“配置文件夹”下，新建两个 txt 文本文档：
  V1 y& @# h% w5 m! b6 i2 k- 新建文本文档.txt
- 新建文本文档 - 副本.txt
( F" V0 S/ F1 r5 m) `+ h( v
3 d- u& G* a% x  Y8 K4 j9 P0 CWindows 10 下，文件资源管理器注意勾选“查看”->“文件扩展名”，否则看不到文件扩展名（.txt）。
8 l/ ^, L  ^1 K% m* P/ Z
6 A1 ~7 i- v( O& x. C3. 将那两个 txt 分别更名为 article-style.css 和 qt-style.css
一定注意，文件扩展名 .txt 也要删除并修改为 .css。重命名的时候，会提示“如果改变文件扩展名，可能会导致文件不可用。确实要更改吗？？”，当然选择“是(Y)”。就改一个空的文本文档的名字而已，天塌不下来，电脑坏不了。

  A  m* Q3 C! u4. 打开 article-style.css 文件（默认是记事本打开，也可以用其他文本编辑器），把下面的内容复制、粘贴进去，保存！一定要保存！
. |2 {, P* t1 k8 z5 m

1. * {
   
2. font-family: Arial, "Microsoft Yahei"!important;
   : d( B, o" _) B6 |
3. }

复制代码

0 H% x2 y. ^: u5 |
) o1 x1 v# Z: h: ]0 Y% ?& l0 l简单解释一下上面的 css 代码：
7 z1 B7 P; h. u我的目的是让 GoldenDict 软件里里外外，所有文字，能是 Arial 的就是 Arial ，汉字都是“微软雅黑”（"Microsoft Yahei"）。
:: 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
0 E3 ~# R. I) s  U:: 注意 css 里直接写字体的汉字名称“微软雅黑”可能没用，要用 "Microsoft YaHei" 且用英文引号括起来。
:: https://baike.baidu.com/item/css%20important/5283065
/ V  a7 o5 w; s& T9 [. G$ t- u:: css !important 作用是提高指定 CSS 样式规则的应用优先权。

& V% A  |3 A; H* B! J3 b% S5. 打开 qt-style.css  文件，把上面的内容复制、粘贴进去，保存！一定要保存！

我这里只是简单示例， article-style.css 和 qt-style.css 可以设置很多东西，GoldenDict 的界面定制，魔法几乎全在这两个 css 里。
5 X3 k3 |/ T7 m! Y不妨看看默认的“不到” 3000 行的 article-style.css  https://github.com/goldendict/go ... 6/article-style.css ，这里面的内容，都是可以定制的。
不过，我是折腾来折腾去，觉得上面的 article-style.css 和 qt-style.css 已经够用了，其他的设置都是 GoldenDict 默认。

& x" t$ |9 r4 N; r7 o. ~+ N6. 依次点击 GoldenDict 菜单栏，【文件】->【重新扫描文件】，或者直接快捷键 Ctrl + F5 ， article-style.css 和 qt-style.css  这两个 css 就生效了，仔细看看，是不是字体变了？
- 左侧默认的英文字体是 Tahoma ，中文字体是宋体（SimSun）;
$ N0 u1 @0 [; O2 @, K- 右侧的英文字体设置的 Arial，中文字体是微软雅黑（Microsoft YaHei）

) a: o7 b6 f9 b' Z3 ?大图点击：https://s1.ax1x.com/2018/02/05/9Kf0OI.png ，明显右边的显得更加平滑。
注：点击图片可查看大图，更清晰。
5 _" u) t: X, ~4 Q6 F6 |9 Y+ j               
( g+ Y4 E( ^1 V. R) T$ p& }
2 E( n; e' \) |) s3 Z字体尤其是汉字字体如果没变，可能您选用的是 qt4 版本的 GoldenDict ，建议用 qt5 版本的。

6 |, {" B1 K; I2 S$ b$ F  S5 r+ {CSS 入门简单，但是又可以很复杂，有很多坑，我也只会很简单的。更多的个性定制方案，还需要大家自行摸索。
6 B5 ]5 M' W$ H' x0 ?
$ D. ?4 k1 [4 R3 W3 y& N% I参考：
0 E" i2 _$ S; @) `- GoldenDict 专贴！https://pdawiki.com/forum/thread-11705-1-1.html




$ f. b7 l) b; H& a0 ~1 e& ^$ z4 w

Napoléon!

谢谢O大，总算解决了goldendict看着字体巨细辣眼睛的问题，但是好像依旧没有mdict里面的字体美观也不知道是我电脑原因不是。没有学过css，我看着另外一个教程的css文件，试探性的在上面两个文件里加了一句【 font-size: 16px;】使得词典大小统一了，不会再次因为缩放使得某些词典字体太大。

monsoonyjy

学习了，谢谢楼主

cakentea

谢谢，正在学习css，一步一步学习。

hh123z

谢谢O大的入门贴，学到了

uncensored

感谢指导，很有用

George...

谢谢楼主分享

zxhoffice

感谢教程，非常好

wxlicy

新手，装上不会用，才发现又这么好心的朋友出了这么贴心的教程。。。感激涕零

king181

感谢太有用了。

cocoyam

想知道以上的建立article-style.css文件夹，在mac上也是同样适用吗？萌新一枚

aholic_ranger

感谢分享