F2E@SeeMusic

Appearance

Barlow Condensed ​

字体的 Google Fonts 主页

使用场景 ​

目前在 看见音乐 和 星球发行 的前台页面都有用到，用来展示特定的数字、英文及常用符号, 如

覆盖 190+ 国家与地区

调用方式 ​

  • 网站面向海外用户，可以直接引用 Google Fonts 生成的调用代码
  • 网站面向中国大陆用户，出于网络原因，需要把 CSS 和字体文件存放在国内可访问的服务器。好处是，可以依据实际需求，做一些内容精简。
    • 自行托管 CSS 内容
    • 通过 npm 安装

自行托管 CSS 内容 ​

字体文件目前存放在阿里云 OSS 的 上海 节点。

CSS 设定：

css
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://pics.kanjian.com/static/fonts/barlow-condensed--regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('https://pics.kanjian.com/static/fonts/barlow-condensed--medium.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('https://pics.kanjian.com/static/fonts/barlow-condensed--semi-bold.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 任何你喜欢的调用 font-family 生效的方式，这里示例使用 class */
[class*="font-bc"] {
  font-family: "Barlow Condensed";
}

内容使用：

html
<span class="font-bc">123456789<span>

通过 npm 安装 ​

实际上，只是把上述的 CSS 内容上传到了 npm，并且做了一些常用的引用 class

安装:

bash
npm install @seemusic/styles

引用:

typescript
@import "@seemusic/styles/src/fonts/barlow-condensed.scss";

目前没有独立打包成 CSS 文件，需要项目中支持 SCSS

使用：

html
<span class="font-bc">font-size: 400</span>
<span class="font-bc--medium">font-size: 500</span>
<span class="font-bc--semi-bold">font-size: 600</span>

调用 Google Fonts ​

HTML <head> 区添加：

html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&display=swap" rel="stylesheet">

<!-- 任何你喜欢的调用 font-family 生效的方式，这里示例使用 class -->
<style>
[class*="font-bc"] {
  font-family: 'Barlow Condensed';
}
</style>

内容使用：

html
<span class="font-bc">123456789<span>

精简调整 ​

删除了设计规范没有使用到的字重 ​

目前设计稿中，只用到了 Regular、Medium、SemiBold 三种字重，如

12345678,900+

删除了不会用到的文字集 ​

删除了 latin-ext 和 vietnamese 语言的设定

注意事项 ​

  • 当前设计规范并没有使用常规粗体，所以代码中没有保留 Bold 部分的设定
  • 该字体 不是 等宽字体