CSS 离子更改默认字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37771723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ionic change default font
提问by Sherlin
I know this question is asked and answered before in the links below. I want to change the default font without having to add to every css.
我知道这个问题之前在下面的链接中被问过和回答过。我想更改默认字体而不必添加到每个 css。
Things I have tried:
我尝试过的事情：
- Changing the .tff, .eot, .woff, .svg file directly to merge my fonts and ionicons
- Tried to implement the font by specifying it in html and css file (it works, but i want it to be default)
- Overwrite the www/lib/ionic/fonts with open-sans font (the ionicons disappear)
- When i use the first link (all formatting is gone, only left with text and buttons) I also tried placing the font-face on top and bottom in scss/ionic.app.scss
- 直接更改 .tff、.eot、.woff、.svg 文件以合并我的字体和离子图标
- 试图通过在 html 和 css 文件中指定它来实现字体（它有效，但我希望它是默认的）
- 用 open-sans 字体覆盖 www/lib/ionic/fonts（离子图标消失）
- 当我使用第一个链接时（所有格式都消失了，只剩下文本和按钮）我还尝试将字体放在 scss/ionic.app.scss 的顶部和底部
Please help! The answers i have seen are instructions but no explanation how it works. I don't know how "ionic setup sass" works/what it does. How gulp plays a part in this.
请帮忙！我看到的答案是说明，但没有解释它是如何工作的。我不知道“离子设置 sass”是如何工作的/它是做什么的。gulp 如何在其中发挥作用。
https://forum.ionicframework.com/t/how-to-change-the-font-of-all-texts-in-ionic/30459
https://forum.ionicframework.com/t/how-to-change-the-font-of-all-texts-in-ionic/30459
https://forum.ionicframework.com/t/change-font-family-and-use-ionicons-icons/26729
https://forum.ionicframework.com/t/change-font-family-and-use-ionicons-icons/26729
采纳答案by Muhsin Keloth
Import all the font filesin to your app.
将所有内容导入font files您的应用程序。
Example:
例子：
@font-face {
font-family: 'Lato-Light';
src: url('../fonts/Lato-Light.eot') format('embedded-opentype'), url('../fonts/Lato-Light.woff') format('woff'), url('../fonts/Lato-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
If you want this font in entire app ,Just give like this
如果你想在整个应用程序中使用这种字体，就这样给
* {
font-family: 'Lato-Light' !important;
}
If you have any doubt.Please let me know.Thanks
如果您有任何疑问，请告诉我。谢谢
回答by Coo
The correct solution for Ionic 2 should be to change the $font-family-basevariableand its friends. That's the way Ionic is made to do it. It gives you more control (like having different fonts per platform), and it avoids the !importantkeyword, which is always a good thing.
Ionic 2 的正确解决方案应该是更改$font-family-base变量及其朋友。这就是 Ionic 的设计方式。它给了你更多的控制（比如每个平台有不同的字体），它避免了!important关键字，这总是一件好事。
Using Ionic 3.3, go to your variables.scssand find the section "Shared variables". Add these lines:
使用 Ionic 3.3，转到您的variables.scss并找到“共享变量”部分。添加这些行：
$font-family-base: 'MyFont';
$font-family-ios-base: 'MyFont';
$font-family-md-base: 'MyFont';
$font-family-wp-base: 'MyFont';
回答by codeherk
For Ionic 4
对于离子 4
There are global variables that are shared across components. --ion-font-familyis one of them.
Add this in property under :rootin variables.scss:
存在跨组件共享的全局变量。--ion-font-family是其中之一。将此添加到 in 下的属性:root中variables.scss：
:root {
--ion-font-family: 'MyFont';
}
Ionic 4 Docs: Advanced Theming Documentation
Ionic 4 文档：高级主题文档
回答by Guillaume Le Mière
You don't want to replace the icon font by the way, so you should use the CSS3 not() property
顺便说一下，您不想替换图标字体，因此您应该使用 CSS3 not() 属性
For example, in app.scss :
例如，在 app.scss 中：
@import url(https://fonts.googleapis.com/css?family=Varela+Round);
*:not(ion-icon) {
font-family: 'Varela Round', sans-serif!important;
}
回答by Surya Shukla
For Ionic 2: Download the fonts from fonts.google.com and paste it in your assets folder. Now in your scss file do the following:
对于 Ionic 2：从 fonts.google.com 下载字体并将其粘贴到您的资产文件夹中。现在在您的 scss 文件中执行以下操作：
@font-face {
font-family: MyFont;
src: url("../assets/fonts/Lato-Regular.ttf");
}
body, span, button, h1, h2, h3, h4, h5, h6, p, ion-item, ion-title {
font-family: 'MyFont' !important;
}
回答by Orlandster
You can simply include your icons as svgformat.
您可以简单地将图标包含为svg格式。
Here's a list with all the latest ionicons: https://github.com/Orlandster1998/ionicons-svg
这是所有最新的列表ionicons：https: //github.com/Orlandster1998/ionicons-svg
