复玥语 Web Fonts 的引入方法(复玥语官方网站)

yumo6666小时前技术文章2

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的4种引入方式及优先级(css引入方式有哪些)

CSS的4种引入方式是:行内样式、内嵌样式、链接样式、导入样式1.行内样式最直接最简单的一种,直接对HTML标签使用style="",例如:<p style="color:#F00; ">...

css样式引入优先级?(css引入样式的几种方法)

css中的优先级讲的有1.选择器的优先级。2.样式引入的优先级。今天要研究的是样式引入的优先级。网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何。四种样式的优先级别是:行内样式最...

css如何引入特殊字体(css如何引入特殊字体样式)

在前端开发过程中难免会用到特殊字体,如何引入特殊字体?首先你得有字体文件,文件格式为,TTF、OTF、EOT、SVG将字体文件放入本地文件夹中或者服务器上css中引入,以下为引入方法@font-fac...

如何在vue中按需引入element-ui?(vue按需引入elementui组件)

# 环境依赖 @vue/cli 4.0.5 vue 2.6.10" element-ui 2.13.0 babel-plugin-component 1.1.1全局安装可以直接引入整个...

web前端基础之css入门(前端css要掌握到什么程度)

#怎么才能让自己变优秀#css入门:css定义:cascading style sheetscss作用:修饰美化页面css引入方式分为3种:内部样式:在head里用style标签来写内联样式:直接在标...

那些容易被你忽略的HTML重要属性,你知道几个?

前言在前端开发编写html文件的时候,我们可能会很熟练的写出常见的html元素,但是如果问到某些元素的差别时,大家不一定能说的出来,今天就给大家总结一下那些很常见但容易混淆的属性。html与csscs...