开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用jQuery知道何时加载@ font-face字体？

使用jQuery加载@font-face字体的时机是在页面加载完成后，即在document.ready事件中加载字体。这样可以确保页面的其他元素已经加载完毕，避免字体加载过程中的页面闪烁或错位。

具体的实现步骤如下：

在页面中引入jQuery库：<script src="https://cdn.jsdelivr.net/jquery/3.6.0/jquery.min.js"></script>
在页面的<head>标签中定义@font-face字体样式：<style> @font-face { font-family: 'MyFont'; src: url('path/to/font.woff2') format('woff2'), url('path/to/font.woff') format('woff'); /* 其他字体属性设置 */ } </style>
在document.ready事件中使用jQuery动态加载字体：$(document).ready(function() { $('body').css('font-family', 'MyFont'); });

在上述代码中，通过选择器选择页面中的<body>元素，并将其字体设置为定义的@font-face字体。

@font-face字体是一种通过CSS定义的自定义字体，它可以让网页设计师使用自己喜欢的字体来渲染网页文本。它的优势在于可以提供更多的字体选择，增强网页的视觉效果和个性化。

适用场景：

当网页设计师希望在网页中使用特定的字体时，可以通过@font-face加载自定义字体。
当需要在网页中展示特殊效果的文本时，可以使用@font-face字体来实现。

腾讯云相关产品和产品介绍链接地址：

腾讯云字体库：https://cloud.tencent.com/product/font
腾讯云CDN加速：https://cloud.tencent.com/product/cdn
腾讯云内容分发网络：https://cloud.tencent.com/product/cdn

相关搜索:使用Webpack和font-face加载字体如何知道页面何时完成加载？如何知道何时使用jQuery取消选择<input>元素 HTML - 如何知道何时加载所有帧？如何知道Lib-GDX HTML何时加载？使用jQuery和GreaseMonkey检测Gmail何时完成加载 GCDWebServerFileResponse，知道文件何时不再使用知道视图何时使用addAndSetupAccessoriesWithCompletionHandler呈现如何知道何时使用PDFKit渲染通过Google Tag Manager加载时知道Google Analytics何时加载使用Javascript/JQuery枚举@ font-face URL 如何知道程序何时使用javascript打开？jQuery语法 - 何时使用$(美元)vs jQuery 我如何知道更改时何时加载ContentControl的内容如何知道应用程序何时在Flutter中加载？为什么我的字体不能在所有浏览器上使用@font-face加载？如何知道JQuery each循环中的所有ajax调用何时完成？什么是AppDelegate以及如何知道何时使用它？使用Rxjs管道，我如何知道observable何时完成？如何知道用户何时使用Spotify API更改歌曲

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

iconfont字体图标库

HTML5学堂小编的话：昨日发布的iconfont的内容有些不足，对于可能不太了解iconfont和特殊字体的学习者来说，可能会存在一定的理解问题，在此针对昨日内容进行补充，详细讲解。字体相关知识了解iconfont（字体图标）前我们先了解下字体，因为iconfont的实现与字体息息相关，所以掌握字体相关知识便于理解iconfont。接下来看一个简单的例子 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5Course

06

CSS3魔法堂：认识@font-face和Font Icon

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　过去我们总通过图片来美化站点的LOGO、标题、图标等，而现在我们可以通过@font-face获取另一种更灵活的美化方式。二、看看例子　　　　　　　　　　　　　　　　　　　　　　　　　　　 /* 定义 */ @font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */ src:

08

Bootstrap里的文件分别代表什么意思及其引用方法

*bootstrap.css 是完整的bootstrap样式表，未经压缩过的，可供开发的时候进行调试用 *bootstrap.min.css 是经过压缩后的bootstrap样式表，内容和bootstrap.css完全一样，但是把中间不必要的空格之类的东西都删掉了，所以文件大小会比bootstrap.css小，可以在部署网站的时候引用，如果引用了这个文件，就没必要引用bootstrap.css了，下面的文件同样。

00

字体更改

其中@font-face相当于创建一个字体族，然后下边body部分是在应用字体族，那个名字其实就是在前边创建的字体的名字。通过在网络上的查找，我首先选择使用的是Robot字体，这个字体族写的英文字体相当漂亮:

03

CSS调用远程字体

Demo 可以参考：http://idv3.sinaapp.com 中标题字体的用法，具体用法如下：

01

谷歌PageSpeed提示利用font-display控制网页字体可见性的加载和替换

新主题搭建完成了，可能时间上可以充裕一些，在整理模板优化性能的时候，看到谷歌 PageSpeed Insights 的诊断结果经常会有一项目：确保文本在网页字体加载期间保持可见状态，解释就是说利用 font-display 这项 CSS 功能，确保文本在网页字体加载期间始终对用户可见。在介绍 font-display 之前，先了解一下什么是 Web Fonts。

03

Fontello：免费Web-font 图标大集合（font-face 图标集）

当我知道这个网站的存在，我就知道我非常有必要将此分享给大家。Fontello，一个目测有200+个图标（数量还在增加）的 Web-font 图标市场，对于广大设计师、前端开发者来说就是宝藏。结合目前的 Web-font 趋势，Fontello 上的图标元素定能让你手中的网站大放异彩！相关技术探讨在以前的话，图标在网页设计中的运用都是通过图片的形式来的；使用图片其实有不少问题，比如说放大失真，增加过多http 请求数（即使使用 CSS Sprite 合并图片也不见得有多好）。最佳的方法应该是使用矢量图标。

06

Web-Fontmin -- 在线提取你需要的字体

关于@font-face @font-face是CSS3中的一个模块，使用 @font-face 可以自定义网页字体，即使用户的电脑没有安装某种字体。怎么用 @font-face 呢？你可能见过类似下面的代码片段，它可以让 @font-face 兼容所有浏览器。 [@font-face](/user/font-face) { font-family: "SentyZHAO"; src: url("/fonts/SentyZHAO.eot"); /* IE9 */ src: url("

08

Web-Fontmin -- 在线提取你需要的字体

@font-face是CSS3中的一个模块，使用 @font-face 可以自定义网页字体，即使用户的电脑没有安装某种字体。怎么用 @font-face 呢？你可能见过类似下面的代码片段，它可以让 @font-face 兼容所有浏览器。

03

Fonts最佳实践

本文分为三个部分：字体加载、字体交付和字体呈现。每一节都解释了字体生命周期的那个特定方面是如何工作的，并提供了相应的最佳实践。

07

@font-face的作用

@font-face是用于在网页上加载自定义字体的CSS规则。它允许开发人员使用自己的字体文件来显示文本，而不仅限于浏览器默认提供的字体。

02

Web 中文字体性能优化实践

Web 项目中，使用一个适合的字体能给用户带来良好的体验。但是字体文件这么多，如果设计师或者开发人员想要查询字体，只能一个个打开，非常影响工作效率。我负责的平台项目刚好需要实现一个功能，能够支持根据固定文字以及用户输入预览字体。在实现这一功能的过程中主要解决两个问题：

01

（美化）WordPress网站添加自定义字体

通过CSS属性@font-face和font-family可以实现加载自定义web font，改变网页字体，实现美化效果。

02

认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg「建议收藏」

在前端作业中，二十年前只有页面中铺满文字就算上线产品，现如今，不加点俏皮的“图标”会让页面显得很 Low 很 Low。

01

使用 webfontloader 优化加载字体在网页中的显示体验

继上篇文章网页字体文件最后再加载实现方法，后写的一篇优化加载字体在网页中的显示体验。

03

网页中第三方字体加载优化方案

前几天写了 CSS更改网站字体这篇文章之后有人问我网站什么字体，我就把css发了过去，于是今天想写一篇关于网页使用第三方字体的详细讲解。

05

CSS使用字体新姿势 unicode-range用法与使用场景

现在想要在CSS中使用自定义字体或者第三方字体，是一件非常简单的事情，只需要简单的使用@font-face规则即可导入各种字体文件。

01

修改网页自定义字体的CSS代码+图文教程

HI，五一玩的怎么样？除了人山人海，高速堵车，高铁全是人之外其他都还好啦，是不是，哈哈哈~~~好了，不闹了，在假期有朋友问我，想要修改网页的字体怎么办？怎么更换网页的字体，又如何引用自定义字体呢？其实很简单，今天简单写个教程，需要能给小白一丢丢的帮助吧。

02

小文’s blog – WordPress自定义字体

字体实现方式在CSS中，我们会发现下面的语句（通常在style.css文件内） font-family: "Microsoft YaHei","WenQuanYi Micro Hei", sans-serif; line-height: 1.8; font-size: 16px; background: #f5f5f5; color: #848484; font-weight: 300; overflow-x: hidden 1234567 font-family: "Micr

02

Fabric.js 使用自定义字体

这次就讲讲在 Fabric.js 中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具。

02

自定义字体

本文主要介绍了字体在网页设计中的重要性，包括字体选择、字体大小和行间距的使用，以及如何使用字体图标来提高用户体验。同时，还提供了一些关于字体样式、字体资源和参考资料的信息。

网页字体文件最后再加载实现方法

今天在优化主题的时候遇到的问题，发现字体文件的体积实在是太大了，即便是使用了cdn作为缓存，但是加载的时间还是过于久，会导致拖慢了全站的加载速度，于是便将字体样式通过异步加载的形式，让其不拖慢网站的加载速度。

02

CSS3与页面布局学习总结（五）——Web Font与Sprite

一、web font web font是应用在web中的一种字体技术，在CSS中使用font-face定义新的字体。先了解操作系统中的字体： a）、安装好操作系统后，会默认安装一些字体，这些字体文件描

06

(转载非原创)前端网页字体优化指南

日常开发网页经常会使用一些特殊字体，比如思源黑体、苹方字体等，因为这些字体在一般的宿主环境中是不存在的，需要通过 css 的 @font-face 定义，并从服务器中加载对应的字体文件，而字体文件一般都是比较大的，甚至有时候一个字体比其他所有的资源（js、css、图片）加起来还要大，对网页的加载性能起到非常关键的影响，因此有必要对字体进行一些优化。本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。

00

Web 反爬虫实践与反爬虫破解

前不久公司的产品信息被竞品给爬了，之前竞品内没有这些信息，是我们独有的。后来发现突然就有了，而且和我们的产品信息一致，后来我们也找到了一些证据，证明是被爬了。

01

前端字体截取技术，做炫酷网站再也不用怕中文字体数据量大啦！【实战】

众所周知，相对于英文字体，中文字体天生是“庞然大物”。英文字体两三百KB已经很大了，而中文字体几MB十几MB都算小的。一方面，中文字体包含的字形数量极多，动辄数以千计甚至万计，而英文字体则只需包含几十个基本字符和符号，哪怕支持多种语言及字符变体，容量达到三千多个字形已经算非常庞大的了。另一方面，中文字形的曲折变化复杂度高，在基于轮廓的矢量字体设计中，用于控制中文字形曲线的控制点普遍比英文更多，因而需要的数据量更大，也会导致字体文件膨胀。

02

网页中内嵌字体

Background 今天在浏览一个网站的时候，发现了一款非常好看的字体，审查元素发现，这个字体叫Open Sans，非常惊艳。和我以前发现的一款字体Segoe UI非常像。对比了一下，其实都很不错，而且很相像。于是Google了下，竟然发现其实这两款字体出自同一人Steve Matteson之手！真是大神级的人物。看来的我的欣赏水平还没有跑偏。不同的是，Segoe UI属于微软的东西，付费，而Open Sans是免费的。刚好自己最近在做网站开发，于是就想把这款字体嵌入到自己正在做的网页里。今天就写一下

07

CSS中字体相关的小技巧

你是否早已厌倦了司空见惯的Helvetica字体？想让你的网页别有一番趣味？或是想避免和同事讨论这些琐事？那么我想你需要看看下面这些代码。在项目中添加这样一小块代码后，将在全局中将Helvetica字体替换（alias）为Comic Sans MS字体（或是Chalkboard SE字体，取决于浏览器支持）。(是的，我知道我最近写了一篇博客关于字体平滑渲染（anti-aliasing），但除了单词相似外它们并不是一回事)

04

让你的网站用上炫酷的中文字体

随着当前 Web 技术的日新月异，网页界面内容越来越丰富，让人眼花缭乱，其中就包括了网页中的各种自定义字体。

02

WordPress全局字体修改详细教程

有很多时候，Wordpress 的字体不能让我们满意，这个时候我们就可以通过一些方法来修改主题的默认字体，来达到我们想要的效果。

02

@font-face 属性

@font-face 允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则的条件规则组中。

01

WordPress全局字体修改详细教程

有很多时候，Wordpress 的字体不能让我们满意，这个时候我们就可以通过一些方法来修改主题的默认字体，来达到我们想要的效果。

03

Iconfont在教育平台的实践

07

Iconfont在教育平台的实践

性能优化是前端开发不得不面对，必须重视的一个经久话题。教育平台项目除了常规的web性能优化外，图片资源站到了流量的70%+，因此图片的性能优化是个重中之重。除了常规的图片优化外，课程封面和机构上传的图片采用了webp格式，之前已介绍过，不再赘述。这样，对平台图片的优化已经达到极致了吗？

02

网页特殊字体过大的优化

==font-spider 仅适用于固定文本，如果文字内容为动态可变的，新增的文字将无法显示为特殊字体。==

05

自定义字体

一般来说，网页上的字体使用的都是我们电脑里面的字体，比如我们常说的微软雅黑、宋体就是 windows 系统自带的字体。所以你可以看到网页的字体一般都比较中规中矩，不像平面设计那样各种新花样。

03

网站优化系列篇之01 — 网页字体可见性

在使用谷歌 PageSpeed Insights 网站测试工具时，诊断结果经常会有一项目：

02

WebFont 三宗罪之一：WebFont 与 FOUT

四赴T.I.T 创意园面试，所学甚多。这篇文章是昨天面试中探讨的一个问题所延伸而来，现在都说WebFont 怎么好怎么好，让我们逆向思维，揭底WebFont 的一些缺点（劣势）。本文综合多篇文章来探讨WebFont 与 FOUT。首先，神马是 FOUT FOUC，即无样式内容闪烁(Flash of Unstyled Content)，指的是 Web 字体在下载并渲染之前，短暂显示无样式文本的情况。它会严重影响用户体验，尤其是当字体样式渲染前后有明显不同的时候。这个名词是09 年的时候由一个老外提出命名的（

07

21. 精读《Web fonts: when you need them, when you don’t》

本期精读让我们来聊一聊Web Fonts，文章地址：https://hackernoon.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae

02

04-移动端开发教程-在线字体

在IE4开始微软就已经开始支持在线字体，不过没有流行起来，直到CSS3新增加了font-face模块，正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1. 为什么要用在线字体问题精灵图（雪碧图）用作背景的时候不能轻易的放大缩小。低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求在线字体带来的革命：在线字体本质就是文字，但是也可是像图形的文字。节省了带宽（相比图片）字体文件大小也不大（一般几百k）。在线字体本身是矢量的，放大缩小都不会失真可以灵活的通过

06

04-移动端开发教程-在线字体图标

本文主要介绍了在移动端网页开发中，如何利用web font和自定义字体实现字体图标。首先介绍了字体图标的原理和分类，然后介绍了如何在移动端网页中使用字体图标。最后列举了几个常用的字体图标工具，以及如何在这些工具中使用自定义字体。

06

反爬虫之FONT-FACE拼凑式

我先举个例子。猫眼电影这个就属于font-face拼凑式。这篇文章我从0开始演示如何制作及应用字符集映射进行数据保护反爬虫！

01

图标字体应用实践

使用的时候，通过background-position调整显示的位置，如下图所示：

02

腾讯云:WordPress教程网站中使用自定义字体

在使用 WordPress 建站的过程中，很多时候我们希望在网页中使用某种特定的字体，而这种特定的字体并不是主流操作系统的内置字体。在使用比较少的情况下，我们可以把想要的文字做成图片，但是如果网页中需要大范围的使用该字体，做成图片的方法就行不通了。而且如果把文字内容做成图片不易修改，也不利于网站 SEO。

02

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂：随着网页的发展，网页中出现了越来越多的字体种类，网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要，那么，如何在网站中使用比较特殊的字体，又不会下载太大的字体文件，来装饰我们网站的部分呢？一起来看看我们CSS3的新功能吧！如何在网站中使用比较特殊的字体随着网页的发展，网页中出现了越来越多的字体种类，原有的微软雅黑以及宋体早就无法满足设计的需要，那么，如何在网站中使用比较特殊的字体（如“华文行楷”）来装饰我们网站的部分呢？作为前端开发的人员都知道，在自己电脑上安装字体查看网页没有什

05

在网页中使用自定义字体

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定义字体，一句话这些都是@font-face实现的，为了能让更多的朋友知道如何使用他，今天我主要把自己的一点学习过程贴上来和大家分享。

01

用webfont为你的网站添加图标

实际上e942是这个字符的16进制unicode编码，在unicode编码中，E000-F8FF是用户自定义区，形状可以任意制定。如果我们向网站引入自定义后的字体，就可以用上面的方式显示图标了。

02

web字体规范

对于设计稿的解析中，肯定是有些设计稿有特殊的字体，而这些字体可能只有设计师才有，或者只有前端拓展了系统字库才能显示器正确效果。但对于前端页面的终极使用者，他们可能系统没有这些字体，那么对于这些特殊字体究竟该如何处理？本文通过与设计，产品，前端的统一沟通，达成共识如下。请各个前端按照这个原则去对应的解析实现设计ui效果。

04

聊一聊“@font-face”

在@font-face处理兼容中出现了一个#iefix这个东东？到底是神马东西呢？案例：首先先了解关于@font-face的基本知识 1、@font-face 与 EOT 格式之所以把它们放到

05

fonts.googleapis.com访问太慢导致站点加载很慢

有些网站需要加载谷歌字体，由于网络问题或者某些问题，fonts.googleapis.com访问太慢会导致站点加载很慢。虽然最后能看到网站，但实际上谷歌字体依然加载失败了，这个体验就非常差劲了。

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭