2019年11月 – My Code

个人喜欢及常用编程字体推荐

我自己本人不做 Electron 的开发，但有一位合作伙伴在使用 NSIS 打包 Electron 应用的时候遇到了一些问题，主要问题有以下几个，先记录下来，然后追个击破。

MouseArea 是 QML 中一个不可见的鼠标操作区域，可响应所有鼠标事件。一般情况下在自定义按钮、自定义需要鼠标交互的区域时使用。有时你只需要它的 hover 通知来做一些事情，而另外的点击等操作需要传递给其下层的控件，这时你就需要忽略其自身的鼠标按下释放等操作让其消息传递到下层了。

为了视觉上的统一，有时你需要保持 UI 上的字体与其他端字体一致，但是又不是所有字体所有系统都带有的，所以有时需要加载一个自定义字体来满足需求。本文重点介绍如何加载以及使用自定义字体。

下载好你需要的字体文件后通过 Qt Creator 将字体文件导入到资源列表（这样字体会加载到执行程序中，执行程序会比较大）：

在导入完字体文件后，需要执行一下 qmake，在项目名称右键->执行qmake

首先复制字体路径：

在 main.qml 中增加如下代码（这样全局都可以访问到）

FontLoader {
    id: localFont;
    source: "qrc:/fonts/PingFang.ttf"
}

字体的 ID 自己随便定义，路径就是上图中拷贝出来的路径，保存后字体就加载成功了。

在需要使用字体的位置像如下代码一样，使用 localFont.name 属性来获取字体名称：

Text {
    color: "#333333"
    font.family: localFont.name
    font.pixelSize: 14
    textFormat: Text.PlainText
}

这样这个 Text 就使用了我们加载的 PingFang 字体了。

Qt 提供了一整套的翻译引擎，讲你需要翻译的内容使用 qsTr(“”) 包括起来就可以通过工具来扫描这些待翻译的内容。我们用 Qt 创建的 Empty 项目来做演示，创建完成后，main.qml 中只有如下代码：

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
}

其中 Hello World 文字就使用 qsTr() 括起来了，我们首先需要做的就是让 Qt 翻译工具可以扫描到这些带翻译的文件。