我为我的应用程序定义了自定义字体,因为默认情况下,像“č”这样的字符是用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;
}

但在 样式。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字体呈现字符(如“”)失败,因为某些客户端无法访问应用程序服务器外部。

最初我尝试在中定义字体 样式。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');
...

但它没有使用我的字体来呈现“č”,不知道为什么。