大鸟云字体接口

鸿蒙字体

默认字体不好看太细于是我爬了个鸿蒙字体。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@font-face{
    font-family: 'HarmonyOS';
    src: local('HarmonyOS'),
    url('https://unpkg.com/zkeq-font@1.0.0/HarmonyOS.ttf') format('truetype');
    font-display: swap;
    font-weight: bold;
    font-style: normal;
  }

@font-face{
  font-family: 'Hack';
  src: local('Hack'),
  url('https://s-gz-2220-icodeq.oss.dogecdn.com/hack-regular-webfont.woff2') format('truetype');
  font-display: swap;
  font-weight: bold;
  font-style: normal;
}

  .search-result {
    margin: 0 0 8px;
  }

重点：font-weight: bold; 加粗
/ 全局使用 /

body {

font-family: ‘HarmonyOS’;
}

article-container {

font-family: ‘HarmonyOS’;
}

代码解释[转载]：

网上的说法片面不一，CSDN和掘金都没见到正确回复，然后我在MDN找到了比较明确的说法。

MDN的 @font-face 这是一个CSS @规则 ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。

src
远程字体文件位置的URL或者用户计算机上的字体名称， 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local(‘Arial’); )。 如果找不到该字体，将会尝试其他来源，直到找到它。

代码：

@font-face {
font-family: MyHelvetica;
src: local(“Helvetica Neue Bold”),
local(“HelveticaNeue-Bold”),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
用到了用户本地字体”Helvetica Neue Bold”的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体”MgOpenModernaBold.ttf”来代替。意味着加入local后，代码加载时会优先采用电脑资源，而不是从网络加载，这个可以加快加载速度，提升用户体验感。
‘Hack’ 为代码字体

本站源

e5云空间太卡已经弃用

1
https://e5-oneindex.vercel.app/zh-CN/picbed/font/

NPM源

1
src:url('https://unpkg.com/hgefonts@1.0.0/bangshu.ttf');
评论