【Unity】UGUI 如何使用CustomFont(自定义字体)

本文详细介绍了如何在Unity中使用自定义字体,包括利用BMFont工具处理字体图像、正确导入Unity及配置CustomFont等步骤,并提供了常见问题解决方案。

说在前面

若是转载 ,请注明出自喵喵丸的博客http://blog.csdn.net/u011643833/article/details/49102423

正体

最近需求做一个界面上Text,想到当时用Cocos-2dx开发时,曾经用过的fnt、plist这一套东西,就想找一下在UGUI里面的Text如何使用自定义的字体。

最先找到的参考内容见王熊猫demon的博客 uGUI文本控件测试

其实这里的内容就是我想要的效果,可是博主大人写的有些随意,所以我这一篇主要是做一个对这篇文章的整理。

效果图

这是完成的效果图,图中的文字已经被调整了颜色:
这是完成的效果图,图中的文字已经被调整了颜色

这是百度到的随意一张图片,我用来作为资源图片:
这是百度到的随意一张图片

关于为什么在下图中字的高度不一样。。。请归咎为我对PS使用不熟练不知道如何严格按照像素切割每一个数字,只是大致估摸了一个值。

步骤

1. 首先是将散图打包成为fnt和png(或者tga格式 Unity也可以识别)的形式。 关于如何使用BMFont打包请参照下面。
BMFont使用
在散图选取的时候,推荐最好不要带彩色,使用只有黑白两色的图。在制作完成之后,黑色部分会变为透明,白色变为可调色部分。

这是通过BMFont处理过后的图片:
这是通过BMFont处理过后的图片

2. 将得到的图片 垂!直!翻!转!
这是因为 4.6.1对于字体的贴图是uv左下为(0, 0)的,不进行翻转,则切割后的文字不能和配置的ASCII码对应。

这是PS 里面的菜单选项:
这是PS 里面的菜单选项3.

3. 接下来的工作在Unity内完成,导入的图片,勾选AlphaFromGrayscal;新建材质球,材质球Shader指定为GUI/Text Shader。
导入图片设置:
导入图片设置

导入图片设置:
导入图片设置

4. 在Project下右键Create->CustomFont,CustomFont的相关参数意义可参见下面的链接。

UnityManual Font
unity圣典上并没有翻译完成的,但是参数比较少应该还算是好理解。

配置生成的CustomFont:
配置生成的CustomFont

5. 接下来的事情就更简单了,在Hierachy中新建UI->Text,指定Text的Font为我们刚配置过的CustomFont,在RectTransform中配置合适的Text框体大小,就可以看到自定义字体显示到UI界面上了~
Text参数中的颜色可以和白色的部分进行混合,想要调整大小,请直接调整Scale吧~

其他

如果出现不能显示的问题,按照目前我所遇见的情况,基本是下面3种
1. 图片没有进行垂直翻转;
2. 图片导入没有勾选AlphaFromGrayscal;
3. Text的长宽不足以显示出一个字符。

随便调整了两个颜色:
随便调整了两个颜色

如果有需求做工具的话 请参照下面的博客

[潜水的小男猫的博客 UGUI(十)美术字库] (http://blog.sina.com.cn/s/blog_89d90b7c0102vk20.html)
可以避免自己手填的烦恼,用到的原理大致和上面叙述的相同(:з」∠)

<think>我们正在讨论QML中自定义字体使用。用户提供了引用内容,但主要是关于其他技术(如UnityUGUI)的自定义字体实现。不过,用户的核心问题是关于QML的,特别是给出的QML代码示例。 根据用户要求,我们需要详细解释如何在QML中使用自定义字体,并结合代码示例: FontLoader { id: customFont source: "fonts/Lobster-Regular.ttf" } Text { font.family: customFont.name text: "艺术字体" } 解释步骤: 1. 使用FontLoader组件加载字体文件:说明其作用、源文件路径设置注意事项。 2. 在Text组件中引用加载的字体:通过font.family属性设置为FontLoader的id.name。 3. 注意事项:字体文件路径、预加载、跨平台路径问题等。 此外,用户提供的引用中提到了其他技术,但我们可以忽略,除非有可类比之处。但注意引用[1]提到了在样式中设置字体族名称,这与QML中设置font.family类似,但不是同一个框架。 由于用户要求结合代码示例进行详细解释,我们将分步骤说明。 同时,按照系统指令,需要生成相关问题。 </think>### QML 使用自定义字体详解(结合代码示例) 以下通过代码示例 `FontLoader` 和 `Text` 组件,详细解释 QML 中自定义字体的实现原理和关键步骤: ```qml // 1. 字体加载器:加载本地字体文件 FontLoader { id: customFont // 组件唯一标识 source: "fonts/Lobster-Regular.ttf" // 字体文件路径(支持TTF/OTF) } // 2. 应用自定义字体 Text { font.family: customFont.name // 绑定加载器的字体名称 text: "艺术字体" font.pixelSize: 36 } ``` #### 关键机制解析: 1. **字体加载原理** - `FontLoader` 在组件初始化时异步加载字体文件 - 文件路径规则: - 相对路径:相对于 QML 文件位置(如 `"fonts/..."`) - 绝对路径:`"file:///C:/Fonts/..."`(需平台权限) - 加载状态监测: ```qml Text { text: customFont.status === FontLoader.Ready ? "加载成功" : "加载中..." } ``` 2. **跨平台注意事项** - **字体嵌入**:通过 `.qrc` 资源文件确保跨平台可用: ```xml <qresource prefix="/fonts"> <file>fonts/Lobster-Regular.ttf</file> </qresource> ``` ```qml source: "qrc:/fonts/Lobster-Regular.ttf" // 使用资源路径[^2] ``` - **字体格式**:优先使用 `.ttf`(TrueType)格式保证兼容性 - **文件大小**:移动端建议字体文件 < 500KB 3. **高级应用技巧** - **预加载优化**(避免文字闪烁): ```qml Component.onCompleted: customFont.load() // 主动触发加载 ``` - **多字重支持**: ```qml Text { font: customFont.name font.weight: Font.Bold // 使用字体的粗体变种 } ``` - **动态切换字体**: ```qml property string currentFont: "Arial" Text { font.family: currentFont MouseArea { onClicked: currentFont = customFont.name } } ``` #### 字体文件结构参考(结合引用说明) Unity/Cocos 中的字体原理与 QML 类似,关键参数对应关系: | Unity 参数[^4][^5] | QML 等效实现 | 说明 | |-------------------------|----------------------|---------------------| | Character Rects/UV | 自动处理 | 字符纹理坐标 | | Ascii Start Offset | 无需设置 | Unicode 自动编码 | | Font Texture(.png) | 仅支持矢量字体 | QML 不支持位图字体 | > **故障排除指南**: > - 字体不生效 → 检查文件路径权限(Android需 `READ_EXTERNAL_STORAGE`) > - 文字显示为方块 → 确认字体包含目标字符集(中文需中文字体) > - 性能卡顿 → 大字体文件使用异步加载:`FontLoader { asynchronous: true }` [Qt 官方字体文档](https://doc.qt.io/qt-6/qml-qtquick-fontloader.html)
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值