如何在整个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类添加元素直接子元素并使用其他css类。 这种解决方法是否适用于所有情况 - vaadin是否使用其他直接代表v-app类的css类？

注意：

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项目中使用。

尤其是在带有 Font family 弹出菜单的 Typography 标签上，您可以为整个应用选择默认字体。为了更好地控制Web typography，您可以打开高级部分来编辑CSS font stack。

顺便说一句，Lumo既有亮模式又有暗模式，此处显示为暗。