Question

我想将Roboto Condensed字体用作本地字体，而不是来自网络。

喜欢

@include font-face('Roboto Condensed', '../../../../../../styles/systemfont/*', 300, 300i, 400, 400i, 700&'subset=cyrillic, cyrillic-ext, latin-ext');

但这似乎不起作用

我尽量避免使用

@StyleSheet("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700&subset=cyrillic,cyrillic-ext,latin-ext")

在我的UI类

中

Answer 1

这对我有用。我将我的字体打包在Jar中，就像Vaadin正在使用他们的Valo主题，然后我通过pom.xml将其作为依赖包含。

将字体文件（ttf等）放在主题文件夹中。如果有不同类型的字体，您可以向SELECT Country FROM Customer WHERE email like '%yahoo%' GROUP BY Country HAVING count(Email)>= 2部分添加更多网址。

文件夹结构如下所示

VAADIN /主题/我的风格/ styles.scss
VAADIN /主题/我的风格/我-style.scss
VAADIN /主题/我的风格/字体/ RobotoCondensed-Regular.ttf
...

styles.scss

@font-face

MY-style.scss

@import "my-style.scss";
.my-valo {
    @include my-style;
}

scss文件中的某个地方

@import "my other files ..."
@mixin my-valo {
    ...
}

@mixin MyRobotoFont($weight, $style, $fontWeight: 400, $fontStyle: normal) {
    @font-face {
        font-family: "Roboto Condensed";
        src: url('fonts/RobotoCondensed-#{$weight}#{$style}.ttf' format('truetype');
        font-weight: $fontWeight;
        font-style: $fontStyle;
    }
}

@include MyRobotoFont($weight: Regular, $style: "");
@include MyRobotoFont($weight: Bold, $style: "");
@include MyRobotoFont($weight: Bold, $style: Italic);
@include MyRobotoFont($weight: "", $style: Italic);
@include MyRobotoFont($weight: Light, $style: "");
@include MyRobotoFont($weight: Light, $style: Italic);

或_variables.scss

font-family: MyRobotoFont
font-weight: 400;
font-style: italic;

如何在vaadin中使用font-face mixin使用本地字体？

1 个答案: