如何在 IBM BPM/BAW 主题中包含自定义字体

Question

我们正在使用 BAWoC（云上的 BAW）并正在自定义主题，但我们需要使用 URL 包含一些文件 WOFF、TTTF（看图片）我可以在哪里包含这些文件？我将这些文件包含在项目 WEB 文件和设计文件中，但没有 URL 我可以从中获取并将它们包含在我的主题源中。

我们的主题文件条目如下所示

/* ubuntu-regular - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ubuntu-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('ubuntu-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('ubuntu-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-500 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('ubuntu-v15-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('ubuntu-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ubuntu-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('ubuntu-v15-latin-500.woff') format('woff'), /* Modern Browsers */
       url('ubuntu-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ubuntu-v15-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
}
/* ubuntu-700 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url('ubuntu-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('ubuntu-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('ubuntu-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('ubuntu-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('ubuntu-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('ubuntu-v15-latin-700.svg#Ubuntu') format('svg'); /* Legacy iOS */
}

Image of Error on Console tab of Chrome

我想将上传的文件称为托管 WEB 文件，但不太确定如何做到这一点。

Answer 1

有多种方法可以实现这一点。我将列出其中的 2 个，您可以选择最适合您情况的那个。但是，在进入解决方案之前，我们有必要了解为什么会出现此问题。当我们为“font-face”提供“URL”属性时，它可以是绝对的URL或相对的（在你的情况下它是相对的）。因此，它将尝试找到与 css 文件相关的字体文件（woff、ttf、svg 等）。在 BPM 中，当我们创建主题文件时，它基本上是一个经过预处理的“less”文件，一个 CSS 文件是自动生成的。这个自动生成的 CSS 文件是从系统 UI 工具包的上下文中提供的。因此，我们需要更改引用字体文件的方式。

现在开始解决方案：

如果您可以从 CDN 访问文件：在主题文件中使用“@import”语句来访问具有相同“字体”的 CDN/externally 托管 CSS 文件-face”声明。字体文件可以相对于此 css。例如“https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/css/fonts.css”.
如果您不同意外部托管 CSS/font-file（您正在使用一些专有字体），您可以将字体文件编码为 base-64 并将它们嵌入到主题中。您可以按照这篇综合文章 http://stephenscaff.com/articles/2013/09/font-face-and-base64-data-uri/. Only thing to keep in mind is the additional weight of loading the font-files even though you may not use them. (Browsers are smart enough to not load font files until they see them being used in the css). Also if you are targeting modern desktop browsers only then using the “woff or woff2” format is your best bet as it has very wide support and are light-weight. You can use website like https://www.fontsquirrel.com/ 从其他格式生成 woff/woff2 文件。

如何在 IBM BPM/BAW 主题中包含自定义字体

How Do I include custom fonts in IBM BPM/BAW theme

fonts

themes

websphere

business-process-management