【问题标题】：How to set custom font in whole Vaadin 7 application如何在整个 Vaadin 7 应用程序中设置自定义字体
【发布时间】：2018-03-06 12:43:49
【问题描述】：

我为我的应用程序定义了自定义字体，因为默认情况下，像“č”这样的字符确实使用 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 是否使用其他 css 类，它们是 v-app 类的直接子类？

注意事项：

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');
...

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

【问题讨论】：

标签： css fonts vaadin vaadin7

【解决方案1】：

所以.. 如果您将主题命名为：my-theme

在文件中：my-theme.scss

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

Here's a link to the other Valo Theme variables

【讨论】：

当我使用LocalFont，$v-font-family: LocalFont, sans-serif; 工作
@Piro 很高兴能够提供帮助。我添加了一个链接，该链接包含其他可能对您有用的 Valo 主题变量。

【解决方案2】：

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

Vaadin 流

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

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

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

顺便说一句，Lumo 有明暗模式，这里显示的是暗模式。

【讨论】：