Oeasy 发表于 2018-2-5 18:01:44

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

本帖最后由 Oeasy 于 2018-2-12 19:51 编辑

# GoldenDict 如何建立 article-style.css 并设置字体?[动图示例]
{:4_109:}
刚使用 GoldenDict 的朋友会问一些很基础的问题,今天有朋友问“GoldenDict 如何设置字体”。
其实已经有一些帖子了,我这里再发一个,“精心”录制了 gif ,希望能对新人有所帮助。这些简单的问题,真·大神从不讲,我也是一步一步知晓这些细节的。知道新人的苦,新手的泪,所以也不厌其烦,写了些看上去很“弱”的入门贴,希望对大家有所帮助。

-GoldenDict 界面显示风格、字体、背景等等的修改 https://pdawiki.com/forum/thread-14082-1-1.html
- 如何为某部词典指定字体? https://pdawiki.com/forum/thread-15900-1-1.html

看不到 gif,点不开大图 https://s1.ax1x.com/2018/02/05/9KWRqx.gif 。
注:点击图片可查看大图,更清晰。
                https://s1.ax1x.com/2018/02/05/9KWRqx.gif



## 文字版步骤:
步骤看上去很多(6 步),其实很简单,我只是写得尽量详(luo)细(suo)而已。你会打字,会上网,会吃饭,那下面的步骤,3 分钟搞定。

1.GoldenDict 菜单栏,依次点击【帮助】->【配置文件夹】,自动就蹦出文件资源管理器窗口(macOS 蹦出 Finder 窗口),定位到了配置文件夹。如果你按照这里的步骤第 3 步做了的话:
        -“GoldenDict 下载、安装、使用入门教程” https://pdawiki.com/forum/thread-14072-1-1.html ,第 3 步 “新建 portable 文件夹”
“配置文件夹”就是 portable 文件夹。

2. 在“配置文件夹”下,新建两个 txt 文本文档:
- 新建文本文档.txt
- 新建文本文档 - 副本.txt

Windows 10 下,文件资源管理器注意勾选“查看”->“文件扩展名”,否则看不到文件扩展名(.txt)。

3. 将那两个 txt 分别更名为 article-style.css 和 qt-style.css
一定注意,文件扩展名 .txt 也要删除并修改为 .css。重命名的时候,会提示“如果改变文件扩展名,可能会导致文件不可用。确实要更改吗??”,当然选择“是(Y)”。就改一个空的文本文档的名字而已,天塌不下来,电脑坏不了。

4. 打开 article-style.css 文件(默认是记事本打开,也可以用其他文本编辑器),把下面的内容复制、粘贴进去,保存!一定要保存!

* {
font-family: Arial, "Microsoft Yahei"!important;
}

简单解释一下上面的 css 代码:
我的目的是让 GoldenDict 软件里里外外,所有文字,能是 Arial 的就是 Arial ,汉字都是“微软雅黑”("Microsoft Yahei")。
:: 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。
:: 注意 css 里直接写字体的汉字名称“微软雅黑”可能没用,要用 "Microsoft YaHei" 且用英文引号括起来。
:: https://baike.baidu.com/item/css%20important/5283065
:: css !important 作用是提高指定 CSS 样式规则的应用优先权。

5. 打开 qt-style.css文件,把上面的内容复制、粘贴进去,保存!一定要保存!

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

6. 依次点击 GoldenDict 菜单栏,【文件】->【重新扫描文件】,或者直接快捷键 Ctrl + F5 , article-style.css 和 qt-style.css这两个 css 就生效了,仔细看看,是不是字体变了?
- 左侧默认的英文字体是 Tahoma ,中文字体是宋体(SimSun);
- 右侧的英文字体设置的 Arial,中文字体是微软雅黑(Microsoft YaHei)

大图点击:https://s1.ax1x.com/2018/02/05/9Kf0OI.png ,明显右边的显得更加平滑。
注:点击图片可查看大图,更清晰。
                https://s1.ax1x.com/2018/02/05/9Kf0OI.png

字体尤其是汉字字体如果没变,可能您选用的是 qt4 版本的 GoldenDict ,建议用 qt5 版本的。

CSS 入门简单,但是又可以很复杂,有很多坑,我也只会很简单的。更多的个性定制方案,还需要大家自行摸索。

参考:
- GoldenDict 专贴!https://pdawiki.com/forum/thread-11705-1-1.html




Napoléon! 发表于 2018-3-20 20:17:48

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

monsoonyjy 发表于 2018-3-13 15:08:23

学习了,谢谢楼主

cakentea 发表于 2019-11-16 19:04:12

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

hh123z 发表于 2020-2-3 22:45:00

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

uncensored 发表于 2020-3-2 10:38:47

感谢指导,很有用

George... 发表于 2020-3-3 21:58:22

谢谢楼主分享

zxhoffice 发表于 2020-3-19 15:42:56

感谢教程,非常好

wxlicy 发表于 2020-3-31 20:57:25

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

king181 发表于 2020-4-9 17:20:55

感谢太有用了。

cocoyam 发表于 2023-3-21 20:35:45

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

aholic_ranger 发表于 2023-7-26 19:12:59

感谢分享
页: [1]
查看完整版本: GoldenDict如何建立article-style.css并设置字体?[动图示例]