Ionic3项目variables.scss字体来源及Raleway字体导入问题咨询

Great questions! Let me break this down for you clearly:

In Ionic 3, those @import "roboto"; and @import "noto-sans"; lines are referencing built-in SCSS partials from the Ionic Angular framework.

• The framework includes pre-written SCSS files for these fonts (located in the ionic-angular/css/fonts directory of the installed npm package) that handle @font-face declarations, font family definitions, and link directly to font files bundled with Ionic.
• Roboto is the default sans-serif font for Ionic's Material Design (Android) themes, while Noto Sans is used for iOS themes or as a fallback. These fonts are included out of the box so you don’t have to manually source or add them to your project.

Ionic doesn’t include Raleway by default, so you’ll need to set it up manually. Here are two reliable methods:

Method 1: Use Google Fonts CDN (simplest approach) #

This method is quick and requires no local file management:

1. Open your project’s src/index.html file, and add the Google Fonts link for Raleway in the <head> section:

   <link href="https://fonts.googleapis.com/css?family=Raleway:400,500,700&display=swap" rel="stylesheet">
   

2. Update your variables.scss to make Raleway the default font across your app (or use it in specific components):

   // Override Ionic's default font variables
   $font-family-base: "Raleway", sans-serif;
   $font-family-ios-base: "Raleway", sans-serif;
   $font-family-md-base: "Raleway", sans-serif;
   

   Or target specific elements directly:

   .custom-text {
     font-family: 'Raleway', sans-serif;
   }
   

Method 2: Use local font files (for offline support) #

If you need your app to work without an internet connection, go with this method:

1. Download Raleway font files: Grab the WOFF2, WOFF, and/or TTF formats from Google Fonts.
2. Add files to your project: Create a fonts folder inside src/assets/, then place the downloaded font files there (e.g., src/assets/fonts/Raleway-Regular.woff2).
3. Define the font in variables.scss: Add the @font-face declarations at the top of the file, before other imports:

   @font-face {
     font-family: 'Raleway';
     src: url('../assets/fonts/Raleway-Regular.woff2') format('woff2'),
          url('../assets/fonts/Raleway-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
   }
   
   // Optional: Add bold/italic variants if you downloaded them
   @font-face {
     font-family: 'Raleway';
     src: url('../assets/fonts/Raleway-Bold.woff2') format('woff2'),
          url('../assets/fonts/Raleway-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
   }
   

4. Set Raleway as default: Override Ionic’s font variables just like in the CDN method:

   $font-family-base: "Raleway", sans-serif;
   $font-family-ios-base: "Raleway", sans-serif;
   $font-family-md-base: "Raleway", sans-serif;
   

内容的提问来源于stack exchange，提问作者Angelo Merlo