复玥语 Web Fonts 的引入方法

moboyou 2025-06-15 19:12 41 浏览

CSS 的 font-face 属性

CSS 的 font-face 是 CSS3 中允许使用自定义字体的一个模块，功能是支持 WEB 字体，能够将网络地址、自定义的 Web 上的字体嵌入到你的网页中。然后网页就可以使用这种字体。

基本用法：

@font-face {
  font-family: 'fer';
  src: local('fer'), local('fer'), url(https://fer.fuyeor.com/src/fer.ttf) format('truetype');
}

可选项 / 意思：

font-family：定义字体的名字。可以根据自己的喜好定义，例如 FER 字体可以定义为「FUYEOR-FER」、「FEOR」等等，需要注意的是如果网页中已经有字体使用了这个名字，再定义时前面的字体会失效。

src：url 是字体的路径。可以是自己网站的相对路径（/src/fer.ttf），可以是绝对路径，也可以是网络地址（https://fer.fuyeor.com/@assets/fonts/fer.ttf）。

format：定义的字体的格式，可以取的值为：truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)。

font-weight：定义加粗样式，800 或者 bold 就能够加粗字体。

font-style：定义字体样式，例如 normal、italic、oblique 等。

unicode-range：定义字体 unicode 范围。例如复玥语就是：U+F220-F314。

复玥语 Webfonts 的引入方法

1、<link> 标签引入方法

在网站 <head></head> 头部标签中加入本行代码：

<html>
  <head>
    <meta charset="utf-8">
     ...
    <link rel="stylesheet" href="https://fer.fuyeor.com/src/font.css">
     ...
  </head>
...

2、通过 CSS 文件的引入方法

<style>
/*
 * 在html中使用本段代码，如在CSS中不要带【<style>标签】
 * 通过使用如下的 HTML head 标签中引入 CSS，以引入字体。
 * <link rel="stylesheet" href="https://fer.fuyeor.com/src/font.css" />
 * 或粘贴以下CSS代码到网站配置：
 */

/*仅包含 FER 字符的字体，体积 10K 左右*/
 @font-face {
  font-family: 'lite-fer';  
  font-style: normal;
  src: local('lite-fer'), local('lite-fer'), url(https://fer.fuyeor.com/src/fer.ttf) format('truetype');
  unicode-range: U+F220-F314;
}
 
/*标准字体*/
@font-face {
  font-family: 'feor';  
  font-weight: 900;
  font-style: normal;
  src: local('feor'), local('feor'), url(https://fer.fuyeor.com/src/feor.ttf) format('truetype');
  unicode-range: U+F220-F314; /*仅对FER字符起效果*/
}

/*粗体*/
@font-face {
  font-family: 'nis-fer';  
  font-style: normal;
  src: local('nis-fer'), local('nis-fer'), url(https://fer.fuyeor.com/src/fernis.ttf) format('truetype');
  unicode-range: U+F220-F314;
}

/*普通字体*/
@font-face {
  font-family: 'lobo-fer'; 
  font-weight: 900;
  font-style: normal;
  src: local('lobo-fer'), local('lobo-fer'), url(https://fer.fuyeor.com/src/lobofer.ttf) format('truetype');
  unicode-range: U+F220-F314;
}

/*超细体*/
@font-face {
  font-family: 'unterua-fer'; 
  font-style: normal;
  src: local('unterua-fer'), local('unterua-fer'), url(https://fer.fuyeor.com/src/unterua.ttf) format('truetype');
  unicode-range: U+F220-F314;
}*/
</style>

这样网页里就可以显示字体：

feor

lobo-fer

unterua-fer

nis-fer

css样式引入

复玥语 Web Fonts 的引入方法

CSS 的 font-face 属性

复玥语 Webfonts 的引入方法

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

oracle常见问题处理

MYSQL经典面试题汇总

医院信息系统突发应急演练记录

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

苹果停止更新Windows版QuickTime!

Linux下开源BI工具Metabase本地化安装及配置详解