前端设置字体教程

will_up
870 阅读3分钟

设置字体教程

更换字体其实是一个很简单的操作,操作过一次就可以了

第一步: 拿到字体包

对,第一步其实就是让设计师提供一个字体包,前端其实不用关心是如何生成的,只需要拿到整个文件夹即可

如图

设置字体-01.png

第二步: 上传字体包

拿到字体包之后,一般公司都有自己的云端存储,比如阿里云、腾讯云、微软云,等等,这里我们举个例子上传到微软云(AWS)

在 aws 新建一个文件夹,比如fonts,名字自己取好就行,也没有特别的规定,然后把字体包放进去,我是直接进入fonts文件夹,然后上传所有字体包内的文件

设置字体-02.jpeg

第三步: 配置字体样式

新建一个css 文件,如上,我这里新建了一个 hendersonSans.css 和fonts字体库同级就可以,设置一些字体的粗细和字体

//hendersonSans.css
/* Thin */
@font-face {
  font-family: 'Henderson-Thin';
  src: url('fonts/Thin.otf') format('opentype');
  font-weight: 200;
}
/* Light */
@font-face {
  font-family: 'Henderson-Light';
  src: url('fonts/Light.otf') format('opentype');
  font-weight: 300;
}
/* Regular */
@font-face {
  font-family: 'Henderson-Regular';
  src: url('fonts/Regular.otf') format('opentype');
  font-weight: 400;
}
/* Medium */
@font-face {
  font-family: 'Henderson-Medium';
  src: url('fonts/Medium.otf') format('opentype');
  font-weight: 500;
}
/* SemiBold */
@font-face {
  font-family: 'Henderson-SemiBold';
  src: url('fonts/SemiBold.otf') format('opentype');
  font-weight: 600;
}
/* Bold */
@font-face {
  font-family: 'Henderson-Bold';
  src: url('fonts/Bold.otf') format('opentype');
  font-weight: 700;
}

注意点

  • font-family 设置必须设置和src 引入的字体对应一致,否则无法生效
  • url 引入的是同级目录下的对应字体文件,要看下你的字体库中是否有这个对应的文件,否则无法生效
  • font- weight要设置, 这个是为了匹配中文字体粗细,字体库的字体文件是针对的英文设置的,字体库一般没有对中文设置字体,中文的粗细是font-weight来决定

第四步: 引入项目

我的项目使用的scss,一般引入方式都是差不多的,比如新建一个 common.scss

/* common.scss */
/* 引入项目的字体包 */
@import url(https://你的远程地址.../hendersonSans.css);
​
html,
body,
#app {
  /*默认是 正常字体 */
  font-family: 'Henderson-Regular', sans-serif;
  font-weight: 400;
}
 /* Thin */
.font-Thin {
  font-family: 'Henderson-Thin', sans-serif;
  font-weight: 200;
}
/* Light */
.font-Light {
  font-family: 'Henderson-Light', sans-serif;
  font-weight: 300;
}
/* Regular */
.font-Regular {
  font-family: 'Henderson-Regular', sans-serif;
  font-weight: 400;
}
/* Medium */
.font-Medium {
  font-family: 'Henderson-Medium', sans-serif;
  font-weight: 500;
}
/* SemiBold */
.font-SemiBold {
  font-family: 'Henderson-SemiBold', sans-serif;
  font-weight: 600;
}
/* Bold */
.font-Bold {
  font-family: 'Henderson-Bold', sans-serif;
  font-weight: 700;
}

这个时候设置字体包就已经基本设置完成

使用如下

通过scss 的@extend语法设置对应的字体粗细

比如页面标题在UI 设计稿上font-weight: 700,那么就用@extend:.font-SemiBold;就可以很轻松实现了

.page-title {
  @extend .font-SemiBold;
  font-size: 36px;
  line-height: 1.5;
  color: #000000;
  margin-bottom: 50px;
}
.main {
  @extend .font-Medium;
  font-size: 20px;
  line-height: 1.5;
  color: #000000;
  margin-bottom: 20px;
}
.text {
  @extend .font-SemiBold;
  font-size: 15px;
  line-height: 1.5;
  color: #000000;
  margin-bottom: 10px;
}
...
...

注意点: 由于设置字体包的语法是通过@extend 因此要想全局使用,就必须将common.scss引入全局中

全局引入在打包配置中很简单,网上也是各种教程,我这里简单附上我的引入代码,仅供参考

// vue.config.js
module.exports = {
  ...
  ...
  ...
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.sass` 这个文件
        // 注意：在 sass-loader v8 中，这个选项名是 "prependData"
        additionalData: '@import "~@/sass/commom.sass"',
      },
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        additionalData: '@import "~@/sass/common.scss";',
      },
      // 给 less-loader 传递 Less.js 相关选项
      less: {
        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
        // `primary` is global variables fields name
        globalVars: {
          primary: '#fff',
        },
      },
    },
  },
  ...
  ...
  ...
};

其实就是配置css的loaderOptions 这里仅供参考

完结

好了,就这样吧,用过一次基本上就知道很简单了

avatar
文章
阅读
粉丝