百度360必应搜狗淘宝本站头条
外键约束 oracle宏程序代码一览表唯一索引 oracleoracle的row numberjava多线程并发处理
当前位置：网站首页 > 技术资源 > 正文

复玥语 Web Fonts 的引入方法

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

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

相关推荐

在html5页面中如何使用vue3

今天是2021.7.14,是个好日子.好久没发布文章了.今天发布下如何在在html页面中使用vue3.义县游学电子科技一直以技术文章为主.以下是h5的页面源码:<html><scri...

分享几个css实用技巧

本篇将介绍几个css小技巧，目录如下：自定义引用标签的符号重置所有标签样式禁止文本选择制作小三角形自定义<q>引用标签的符号默认q标签引用符号是浏览器根据不同语言环境自动设置的，当然我们也...

复玥语 Web Fonts 的引入方法

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

17个CSS知识点整理

微信ID：WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄（点击页底“阅读原文”下载源代码）●●●1、对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机...

JavaScript开发基础——CSS知识

JavaScript开发基础——CSS知识使用CSS技术可以对文档进行精细的页面美化，CSS不仅可以对单个页面进行格式化，还可以对多个页面使用相同的样式进行修饰，以达到统一的效果。CSS的相关概念CS...

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

为什么学习网页制作？互联网时代的今天，各种各样的网页充斥着我们的生活。只要使用浏览器，打开的每一个页面都可以称之为网页。即使使用头条这样的APP，其内容布局、展示的方法也脱胎于网页页面设计的方法与原则...

如何拥有渐变色 | css进阶

渐变色--线性渐变人类对美的追求是无止境的，色彩的搭配是对美的最基本要求，而其中的渐变，就能给人一种舒缓的感觉，它不那么的突兀，给人一种不逼迫、缓缓地和高逼格感觉。Css3引入了渐变的功能，有线性渐变...

Tailwindcss 入门

是什么？Tailwindcss是一个功能类优先的CSS框架，通过flex,pt-4,text-center和rotate-90这种原子类组合快速构建网站，而不需要离开你的HTML。...

html css js基础知识点

提示：点击上方"蓝色字体"↑可以订阅噢！1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更...

(一)熟练HTML5+CSS3，每天复习一遍

前言学习网页的概念和分类，了解静态网页和动态网页的不同；了解网页浏览器的工作原理。了解HTML,XHTML,HTML5的概念，制作简单的HTML页面的开发。什么是网页可以在internet上通过网页浏...

JavaScript代码怎样引入到HTML中?

JavaScript程序不能独立运行，它需要被嵌入HTML中，然后浏览器才能执行JavaScript代码。通过<script>标签将JavaScript代码引入到HTM...

你知道HTML、CSS、JS文件在浏览器中是如何转化成页面的吗?

在前面一篇文章：「高频面试题」浏览器从输入url到页面展示中间发生了什么中，我们有对浏览器的渲染流程做了一个概括性的介绍，今天这篇文章我们将深入学习这部分内容。对于很多前端开发来说，平常做工主要专注...

HTML页面中head标签有啥用?——零基础自学网页制作

head标签概述通过之前三节的学习，我们基本了解了HTML标记语言的基本语法，也明确了一个基本原则，那就是网页中所有的可视信息都是写在<body></body>标签之间的，在一...

一、什么是CSS3

一、什么是CSS3如何学习SEO搜索引擎优化CSS是什么CascadingSheet层叠级联样式表，表现，网页美化CSS发展史：CSS1.0CSS2.0DIV+CSSHTML和CSS结构分...

html实现原生table并设置表格边框的两种方式

在HTML中实现原生表格并设置表格边框的详尽教程在HTML中，表格是展示结构化数据的重要工具。为了使表格更加清晰、美观，设置表格边框是常见的需求。本文将深入探讨两种原生方式来实现表格边框...

一周热门
最近发表
标签列表
蜀ICP备2024111239号-28