如何在整个 Vaadin 7 应用程序中设置自定义字体

Question

我为我的应用程序定义了自定义字体，因为默认情况下像“č”这样的字符确实使用 Arial 字体呈现，而应用程序的其余部分使用 "Open Sans Light" 呈现。在 styles.scss:

@include v-font('LocalFont', '../../../../mytheme/fonts/open-sans-v15-latin-ext_latin-300');
...
...

从呈现的网页我看到使用的字体系列取决于 styles.css:

.mytheme.v-app, .mytheme.v-app-loading {
  font: 300 16px/1.55 "Open Sans", sans-serif;

但我认为没有办法影响它。在 mytheme.scss 中 @mixin mytheme { 我试图定义：

.v-app, .v-app-loading {
    font: 300 16px/1.55 LocalFont, sans-serif;
}

.mytheme.v-app, .mytheme.v-app-loading {
    font: 300 16px/1.55 LocalFont, sans-serif;
}

但在 styles.css 中构建为：

.mytheme .v-app, .mytheme .v-app-loading {
  font: 300 16px/1.55 LocalFont, sans-serif;
}

.mytheme .mytheme.v-app, .mytheme .mytheme.v-app-loading {
  font: 300 16px/1.55 LocalFont, sans-serif;
}

并且不会使用我的本地字体（除非我删除 .mytheme 后的空格）。

有没有办法影响 .mytheme.v-app, .mytheme.v-app-loading { 中的字体系列？

作为解决方法，我在我的主题中定义了这个：

.v-ui{
    font: 300 16px/1.55 LocalFont, sans-serif;
}

.v-tooltip{
    font: 300 16px/1.55 LocalFont, sans-serif;
}

.v-window{
    font: 300 16px/1.55 LocalFont, sans-serif;
}

.v-Notification{
    font: 300 16px/1.55 LocalFont, sans-serif;
}

这可能涵盖所有情况，但我不确定 vaadin 是否可以添加元素 v-app css class 的直接子元素并使用其他 css class。 此解决方法是否适用于所有情况 - vaadin 是否使用其他 css classes 是 v-app class 的直接子代？

备注：

Vaadin documentation 仅声明在我的样式中使用字体系列。

我正在使用服务器字体，因为应用程序在代理后面，并且使用 Web 字体渲染像“č”这样的字符失败，因为一些客户端无法访问应用程序服务器外部。

最初我尝试在 styles.scss 中定义我的字体，例如：

@include v-font('Open Sans', '../../../../mytheme/fonts/open-sans-v15-latin-ext_latin-300');
...
@include v-font('Open Sans Light', '../../../../mytheme/fonts/open-sans-v15-latin-ext_latin-300');
...

但它没有使用我的字体来渲染“č”，不知道为什么。

Answer 1

所以..如果你给你的主题命名：my-theme

在文件中：my-theme.scss

您需要在顶部添加文件：$v-font-family: "Open Sans", sans-serif;

Here's a link to the other Valo Theme variables

Answer 2

这个问题是关于 Vaadin 的旧版本 7。这是当前 Vaadin 14 中具有相同需求的人的答案。

Vaadin 流

新一代 Vaadin 版本 10 及更高版本称为 Flow。 Vaadin 的这次改造现在默认使用 Lumo theme。主题设计为易于更改，更改字体、大小、颜色、间距等。

Vaadin 团队现在 offers an online editor 可以轻松更改主题，使用可调整的设置调色板，以及查看效果的可视化显示。当您感到满意时，您可以下载主题设置以在您的 Vaadin 项目中使用。

特别是，在 Typography 选项卡及其 Font family 弹出菜单中，您可以为整个页面选择默认字体应用程序。为了更好地控制您的 Web typography, you can open the Advanced section to edit the CSS font stack.

顺便说一下，Lumo 有浅色和深色两种模式，这里显示的是深色。

如何在整个 Vaadin 7 应用程序中设置自定义字体

How to set custom font in whole Vaadin 7 application

css

fonts

vaadin

vaadin7

Vaadin 流