CSS3 @font-face 规则之自定义与网络字体全面指南(推荐)_F11

分享到

CSS3 @font-face 规则之自定义与网络字体全面指南(推荐)

css 来源：互联网作者：佚名发布时间：2024-06-21 21:49:24 人浏览

摘要

CSS3的@font-face规则为网页设计开辟了全新的天地，允许开发者引入自定义字体以及网络字体资源，极大丰富了网页的视觉表现力与品牌一致性。本文不仅将详细解析@font-face规则的工作原理、关

CSS3的@font-face规则为网页设计开辟了全新的天地，允许开发者引入自定义字体以及网络字体资源，极大丰富了网页的视觉表现力与品牌一致性。本文不仅将详细解析@font-face规则的工作原理、关键属性，还将指导您如何在实际项目中应用自定义字体，并特别阐述如何引用第三方网络字体服务提供的字体资源，辅以代码示例，助您全面掌握自定义与网络字体的使用技巧。

一、@font-face规则简介

@font-face规则是CSS3中用于定义和引用自定义字体的一种CSS规则。通过它，开发者可以将自定义字体文件（如.ttf、.woff、.woff2等格式）链接到网页中，使浏览器在渲染文本时使用这些指定的字体，而无需用户本地安装这些字体。

Css

@font-face {

font-family: 'MyCustomFont';

src: url('myfont.woff2') format('woff2'),

url('myfont.woff') format('woff');

font-weight: normal;

font-style: normal;

}

二、@font-face规则关键属性

1. font-family

font-family属性为自定义字体命名，该名称在后续的CSS样式中作为字体系列名称来引用。

Css

1	font-family: 'MyCustomFont';

2. src

src属性指定了自定义字体文件的URL和格式。可以提供多个资源来源和格式，浏览器会按照顺序尝试加载直到成功。

Css

1 2	src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');

url()：包含字体文件的URL。
format()：指定字体文件的格式，如woff2、woff、ttf等。

3. font-weight与font-style

这两个属性定义了自定义字体的粗细和样式，以便在不同情境下正确使用。

Css

1 2	font-weight: normal; /* 可选值：100-900、bold、normal / font-style: normal; / 可选值：italic、normal */

4. 其他可选属性

unicode-range：指定字体支持的Unicode字符范围，有助于按需加载部分字符集。
font-display：控制字体加载期间的文本渲染行为，如auto、block、swap、fallback、optional。

三、应用自定义网络字体

1. 引用自托管字体

定义好@font-face规则后，只需在常规CSS样式中使用定义的font-family名称即可应用自定义字体。

Css

body {

font-family: 'MyCustomFont', Arial, sans-serif;

}

h1 {

font-family: 'MyCustomFont', serif;

}

在上述示例中，body元素和h1元素将优先使用自定义字体MyCustomFont。如果该字体加载失败或用户浏览器不支持，将回退到指定的备选字体（如Arial或serif）。

2. 引用网络字体服务提供的字体

许多第三方网络字体服务（如Google Fonts、Adobe Fonts、Font Awesome等）提供了免费或付费的字体资源。使用这些服务时，通常只需要在HTML文档中嵌入特定的<link>标签或在CSS中引入提供的URL，即可轻松引用网络字体。

Google Fonts示例：

Html

body {

font-family: 'Roboto', Arial, sans-serif;

}

Font Awesome图标字体示例：

Html

四、优化字体加载与性能

1. 多格式支持与浏览器兼容性

提供多种字体格式（如woff2、woff、ttf等）以覆盖不同浏览器的兼容性需求。woff2格式通常具有最小的文件大小和最快的加载速度，应作为首选。

2. 字体子集化与unicode-range

对于包含大量字符的字体，可以使用字体子集化工具仅提取项目所需的字符，减少文件大小。结合unicode-range属性，浏览器仅下载所需的字符集，进一步优化加载性能。

3. 使用font-display

通过设置font-display属性，可以控制在字体加载期间文本的渲染策略，如使用swap策略允许文本先以备用字体显示，待自定义字体加载完成后再替换。

Css

@font-face {

font-family: 'MyCustomFont';

src: url('myfont.woff2') format('woff2'),

url('myfont.woff') format('woff');

font-weight: normal;

font-style: normal;

font-display: swap;

}

五、实战代码示例

Html

<!DOCTYPE html>

<head>

<title>Custom & Network Font Example</title>

<style>

@font-face {

font-family: 'MyCustomFont';

src: url('myfont.woff2') format('woff2'),

url('myfont.woff') format('woff');

font-weight: normal;

font-style: normal;

font-display: swap;

}

body {

font-family: 'OpenSans', Arial, sans-serif;

}

h1 {

font-family: 'MyCustomFont', serif;

font-weight: bold;

}

</style>

</head>

<body>

<h1>Welcome to Our Website</h1>

<p>This is a paragraph using the custom MyCustomFont and Open Sans (from Google Fonts) fonts.</p>

</body>

</html>

在这个示例中，我们定义了一个名为MyCustomFont的自定义字体，并在h1元素中应用了该字体。同时，我们引入了Google Fonts提供的Open Sans字体，并在body元素中使用。确保相应的自定义字体文件（myfont.woff2和myfont.woff）位于与HTML文件相同的目录下，或者提供正确的URL路径。

结语

CSS3的@font-face规则及其对网络字体的支持为网页设计带来了无限可能，无论自托管还是引用第三方服务，都能轻松实现字体的个性化选择与应用。通过深入理解其工作原理、关键属性以及优化技巧，您将能更自如地驾驭这一特性，为您的项目打造独特而专业的字体体验。在实际应用中，务必兼顾字体加载性能与用户体验，确保自定义与网络字体的高效、稳定使用。

您可能感兴趣的文章 :

原文链接 :

Tag : CSS3(182)

swiper中swiper-pagination中的位置设置方法

需求：期望swiper-pagination 导航靠右下角解决：可以配置clickableClass这个属性，属性值指定的是你自定义的class类名。 swiper实例，导航paina
CSS3 @font-face 规则之自定义与网络字体全面指南

CSS3的@font-face规则为网页设计开辟了全新的天地，允许开发者引入自定义字体以及网络字体资源，极大丰富了网页的视觉表现力与品牌一致性
CSS3媒体查询简介与使用方法介绍

什么是CSS3媒体查询？ CSS3媒体查询是一种用于根据设备的特性和特定条件来应用不同样式的CSS技术。通过媒体查询，我们可以针对不同设备
CSS实现苹果官网文字渐入效果的代码

效果分析文字是从左到有慢慢呈现出来，不是整体消失和出现，那么肯定不能使用透明度。我们可以想到渐变文字，然后通过改变背景的
css3实现文本与图片横向无限滚动动画效果

1. 实现效果 gif录屏比较卡，实际很湿滑，因为是css动画实现的 2.html结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 3
CSS3 max/min-content及fit-content、fill-available值的案例

c3中对width的值多了几个值：fill-available,max-content,min-content, 以及fit-content。 1.width:fill-available 我们在页面中扔一个没有其他样式的div元素，则
CSS3的常用样式属性和用法案例介绍

在网页设计中，CSS是一种强大的样式表语言，可以为网页添加各种各样的样式和效果。而CSS3作为CSS的第三个版本，引入了许多新的样式属性
CSS3 grid布局的简单使用介绍

CSS3 grid 网格布局的使用 1.概述如果你要做成以下的这种效果，你会怎么做？你可以选择使用absolute绝对定位为这些块元素定位，也可以使用
CSS实现鼠标悬停图片放大的多种方法

1.背景图片放大使用css设置背景图片大小100%，同时设置位置和过渡效果，然后使用：hover设置当鼠标悬停时修改图片大小，实现悬停放大效
CSS鼠标悬浮动画-hover属性介绍

1. Grow-Shadow 鼠标移入盒子放大并出现底部阴影效果：代码 1 div class=box/div 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .box { width: 200px; height: 200px;