Skip to content

Latest commit

 

History

History
114 lines (88 loc) · 3.08 KB

font-deploy.md

File metadata and controls

114 lines (88 loc) · 3.08 KB
Raw

Deploy font file

In @alifd/next, the icon font file is from at.alicdn.com, and the robot font file is from i.alicdn.com. If users of your site cannot access the above cdn assets or you want to deploy these font assets to the internal network. The following options can be taken:

Icon Font file

replace the variable that represents the path to the icon font file:

  1. use the index.scss of the theme package directly

    at the application's scss entry, inject the $icon-font-path variable before importing the index.scss of the theme package:

    $icon-font-path: "//g.alicdn.com/icon-font-path";
@import "~@alifd/theme-xxx/index.scss";

  2. modular import js/scss

    use @alifd/next-theme-loader(with webpack 2+ as an example):

    {
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    use: [
      'css-loader',
      'fast-sass-loader',
      {
        loader: '@alifd/next-theme-loader',
        options: {
          theme: '@alifd/theme-xxx',
          modifyVars: {
            '$icon-font-path': '"//g.alicdn.com/icon-font-path"'
          }
        }
      }
    ]
  })
}

Upload the font file to the static resource server or cdn, such as

//g.alicdn.com/icon-font-path, which should have the following 4 files:

icon-font.eot
icon-font.woff
icon-font.ttf
icon-font.svg

Note: the icon font file address can be found in the variables.scss of the theme package:

Another thing to note is that each time you add or replace an icon, after re-publishing the theme package, the icon variables will be updated and the icon font file will need to be re-uploaded to your own static resource server.

Robot Font File

replace the variable that represents the path to the roboto font file:

  1. use the index.scss of the theme package directly

    at the application's scss entry, inject the $font-custom-path variable before importing the index.scss of the theme package:

    // Note, finally end with /
$font-custom-path: "//g.alicdn.com/font-path/";
@improt "~@alifd/theme-xxx/index.scss";

  2. modular import js/scss

    use @alifd/next-theme-webpack-plugin:

    new ThemePlugin({
  theme: '@alifd/theme-xxx',
  modifyVars: {
    // Note, finally end with /
    '$font-custom-path': '"//g.alicdn.com/font-path/"'
  }
})

Upload the font file to the static resource server or cdn, such as

//g.alicdn.com/font-path, which should have the following 20 files:

roboto-thin.eot
roboto-thin.woff
roboto-thin.woff2
roboto-thin.ttf
roboto-light.eot
roboto-light.woff
roboto-light.woff2
roboto-light.ttf
roboto-regular.eot
roboto-regular.woff
roboto-regular.woff2
roboto-regular.ttf
roboto-medium.eot
roboto-medium.woff
roboto-medium.woff2
roboto-medium.ttf
roboto-bold.eot
roboto-bold.woff
roboto-bold.woff2
roboto-bold.ttf

The above 20 font files are packaged: robot-font.zip