自定义字体在Ionic3
问题描述:
我使用Ionic3
:自定义字体在Ionic3
Your system information:
Cordova CLI: 6.4.0
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.3.1 Build version 8E1000a
我有以下字体:Ormont_Light.ttf
正如你可以在上面看到,我尝试在app.scss
应用此新的字体文件。但是,我似乎无法使其生效。
正如你所看到的,它依然使用的离子默认:
font-family: "Roboto", "Helvetica Neue", sans-serif;
问题
请谁能告诉我如何使用ttf
实施新的字体文件在离子3?
UPDATE
我添加以下内容:
@font-face {
font-family: Ormont_Light;
src: url(../assets/fonts/Ormont_Light.ttf) format("ttf");
font-weight: normal;
font-style: normal;
}
body {
font-family: Ormont_Light !important;
}
现在我得到的字体显示在源达:
body {
font-family: Ormont_Light !important;
}
但它没有被应用到应用程序上如预期的那样是全球水平。
UPDATE
variables.scss
$font-family-base: "Ormont_Light";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;
感谢,那种作品。现在它也应用Ormont_Light
我所有的风格都很棒。即dom
现在有:
body {
font-family: Ormont_Light !important;
}
但显示的字体是用Times New Roman
字体,我的猜测是浏览器的默认时,它无法找到引用的字体。所以我想我的路径.ttf
文件是不正确的。
你在哪里让你.ttf
文件?
答
查看关于overriding SASS variables的部分。
你需要重写
$font-family-base
在variable.scss。
如果你想要它是android/ios特定覆盖: $font-family-md-base
或 $font-family-ios-base
分别。
尝试:
$font-family-base: Ormont_Light
答
你需要重写Ionic Sass Variables。 您需要在src/theme/variables.scss
中添加此字体。
@font-face {
font-family: 'Ormont_Light';
src:url('../assets/fonts/Ormont_Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
$font-family-base: "Ormont_Light";
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;
感谢您对此的更新。它非常帮助我 – RobIsAnxious