在SAPUI5中使用自定义字体 - 用自定义字体覆盖整个主题及其控件的字体

Question

有没有办法覆盖现有主题及其控件，使用自定义字体？

问题：我可以使用我的自定义字体覆盖全局字体，但是我无法覆盖每个控件的字体，因为所有控件都有自己的字体属性而不是从全局继承。

有什么解决方案吗？

- Chillbird

Answer 1

UI5主题化和LESS

UI5内部使用LESS，以便舒适地启用主题化。LESS是一种CSS预编译器，可以扩展CSS功能。其影响和缺点是提供的UI5主题已经预编译，这意味着您的应用程序只使用生成的纯CSS。

UI5主题化工具

不幸的是，到目前为止，UI5背后的真正工具并未向我们开发人员公开。他们提供的唯一工具是Theme Designer，甚至还有一个按需版本在此。通过Theme Designer，您应该能够轻松实现所需的样式更改。

修改UI5主题

但是，所有包含在主题中的ControlName.css文件都是未编译的less文件，您可以在library.less文件中找到UI5正在使用的所有LESS变量。因此，通过少量修改，您应该能够将这些LESS文件重新编译为一个新的library.css文件，该文件在运行时使用。库的所有CSS文件都与library.less组合并编译为一个单独的文件 - library.css

因此，如果您想要更多详细信息并了解背后的情况，请检查library.less文件，例如：http://[host][:port]/[path_to_my_application]/resources/sap/m/themes/sap_bluecrystal/library.less

您将在其中找到所有UI5 LESS变量。对您最有趣的可能是@sapUiFontFamily。

无论如何，我不建议在此处进行大量更改，因为您的样式很容易在新的UI5版本中出现故障！

- cschuff

---

非常详细！是的，我已经开始使用UI主题设计师了，会让自己适应它。我也会研究一下您关于编译LESS选项的建议。谢谢cschuff！ - Chillbird

非常欢迎。我曾经在构建自定义主题方面遇到了很多困难。是的，这真的很痛苦 :D 如果您喜欢我的答案，请将其标记为正确答案。敬礼，Chris - cschuff

是的，我们正在构建一个自定义的外观和感觉，远离现有的SAPUI5主题。因此需要大量的定制。感谢您的帮助！ - Chillbird

Answer 2

你是否正在使用UI主题设计器来生成自定义主题的CSS文件？如果没有，你应该尝试一下。它可以使调整变得非常容易。

要自定义几个或所有字体系列，只需在设计器右侧选择“专家”设置选项卡，然后筛选“FontFamily”。它将列出所有相关属性。

- TimoStaudinger

---

谢谢TimoSta！但我们没有使用任何主题设计师。这只是普通的CSS编辑，我们团队还没有接触或访问这个主题设计师。所以想向专家请教一些技巧和窍门。 - Chillbird