使用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字体来实现。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我正在使用@ font -face，我讨厌Firefox显示默认字体，等待加载@ font -face字体，然后替换它。因此，整个页面都会使用新字体闪现。Webkit浏览器在加载字体之前不会显示文本，而且外观要干净得多。所以，我想知道jQuery是否可以帮助我知道页面上的所有数据是什么时候加载的，包括@font-face文件，这样我就可以显示我的文本了？有没有一个
浏览 2提问于2010-12-08得票数 45
回答已采纳
2回答
我使用的是@font-face，它必须具有较大的字号。例如，标题的字体大小是54px，这通常是很大的，但在这个字体中它显示为中等。
所以问题是，当页面加载时，替代字体看起来非常大，破坏了整个布局。有没有办法可以为替代字体指定一个字体大小？
浏览 1提问于2012-07-16得票数 6
我对jQuery和@font-face有个问题。文档代码在$( jQuery ).ready
浏览 1提问于2010-07-23得票数 10
回答已采纳
1回答
根据页面的协议加载css
、、、、
我在同一个css文件中有2@字体 /* code for https://site.con */@font-face { }
当站点是https时，我只需要加载第一个@字体面板，当站点是http时，只需要加载第二个@字体面板。使用js/
浏览 0提问于2020-01-09得票数 0
回答已采纳
1回答
我有一个加载屏幕，它(制作动画)创建了几个img对象(JavaScript)，这些对象将onload方法连接到counting方法。一旦计数达到img长度数组，加载就结束了。那么有没有一种方法可以用@font-face CSS自定义字体来添加呢？
浏览 6提问于2014-03-30得票数 0
如何访问DOM以检测页面的网页字体何时加载？
我有29个.ttf字体，have 64-编码成一个CSS文件。我在页面上还有一个隐藏的div，它使用每种字体，使浏览器将每种字体读入内存。这个过程需要时间，所以在浏览器将每个字体加载到内存后，我需要对AJAX事件进行排队。*我知道document.ready和window.onload接近了，但是我想在外部资源完成加载之前触发事件，以便更快地触发AJAX
浏览 2提问于2011-07-28得票数 3
回答已采纳
1回答
据我所知，我只能在创建Arial时使用Sprite。其他字体不工作。有没有办法添加像Roboto这样的自定义字体？上面的代码(刚刚编写了相关部分)在Ariel中工作并给了我字体。(不过有点模糊。想知道如何获得清晰的明文)
浏览 3提问于2017-09-27得票数 0
回答已采纳
2回答
问题主要出现在火狐(我使用的是FF6)，但偶尔也会出现在Chrome和Safari (而不是IE9)中:当页面加载时，菜单项上方的橙色线有时会太长和太右。你知道为什么会这样吗？position()、.left和outerWidth()有什么奇怪的地方吗？非常感谢您的反馈！}, options.speed) });})(jQuery
浏览 2提问于2011-08-22得票数 0
我使用的是PlayN的1.3.1版本。这个问题在下面的google groups线程中进行了讨论，但我不确定如何实施所提出的建议：
我的补救措施是添加一个闪屏，在重定向到带有文本的屏幕之前，显示图像几秒钟
浏览 1提问于2012-07-23得票数 1
回答已采纳
2回答
我认为现在是在web上广泛使用自定义字体的时候了！给你的网站添加自定义字体的最好也是最简单的方法是。这很容易使用，而且确实是跨浏览器的。它甚至支持IE5.5！无论如何，它迫使客户端下载一个庞大的字体脚本，而且用户无法在浏览器中正确使用“查找”和“缩放”功能。另一方面，@font-face现在被广泛支持，而且它更具语义性。他们讨论了@font-face浏览器支持和其他问题。
我的问题是如何将@font-face和Cufon一起使
浏览 1提问于2011-05-01得票数 1
回答已采纳
我可以用jQuery得到字体var fsiz = $("p").css('font-size');
但是，如果字体系列是web字体-例如"Open Sans“，我还需要找到加载它的@font-face规则的src。我不知道该怎么做。
浏览 0提问于2012-11-01得票数 2
回答已采纳
我很好奇在网站中使用哪一个会更好或更标准。我倾向于使用Google Web字体，但我担心是否需要额外的CSS文件。
浏览 0提问于2012-10-20得票数 3
回答已采纳
1回答
在Firefox中，当页面加载时，它会在使用指定的font-face呈现之前显示一段时间(取决于连接速度)的默认字体(比如Times New Roman)。我知道这不可能更快，但是我如何设置，例如，Arial作为默认字体，然后在加载font-face时字体发生变化？
浏览 3提问于2011-03-01得票数 3
回答已采纳
我在公用文件夹中有一个font-face文件夹和一个css，它对所有的font-face字体收费 font-family font1@font-face src url('/fonts/font2-Regular.otf')
@font-facef
浏览 5提问于2013-02-22得票数 2
1回答
我在CSS中使用@font-face。font ttf的大小为400kb，因此加载需要时间。我想检查字体是否已完全下载，这样之后，我可以使文本Label可见。如何在jQuery中执行此操作
因为在该字体未下载之前，该站点以默认的Arial字体显示Label，这是不可取的。
浏览 4提问于2015-07-25得票数 2
1回答
我已经通过@font-face加载了一些特殊的字体。字体在所有浏览器中都能正常加载和工作，但不能在Safari中渲染。但是，在选择具有特殊字体的元素后，字体会进行渲染。使用cia CSS加载字体，如下所示： font-family: 'Brandon';font-weight: bold;
src
浏览 0提问于2012-05-29得票数 0
回答已采纳
无法加载具有不同粗细的某些字体。我在css文件中使用font-face加载字体，如下所示： @font-face { src: url("/includes/fonts/globerbold.otf') format('embedded-opentype");}
@font-fa
浏览 20提问于2019-04-23得票数 0
回答已采纳
1回答
使用字体面板时jQuery不对齐
、、、、
我正在做一个简单的菜单，但我不知道为什么当我使用的字体不是衬线的时候，它没有正确地对齐到右边。}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></
浏览 5提问于2011-05-28得票数 4
回答已采纳
1回答
我试图在ReactJS中为不同的字体权重使用不同的字体，但是在我们的全局样式表中尝试了两种不同的导入方法之后，我只能加载第一个或最后一个导入的字体。css.global( fontFamily: 'ModernEra',
src: `url( ${Mo
浏览 0提问于2019-01-24得票数 1
我正在为设计师开发一个简单的工具，用户可以输入一些文本，然后通过各种字体生成，为他们的项目找到最好的选择。
我正在努力寻找最好的加载字体的方式。显然，我并不是真的想一次加载所有的字体，所以我只需要在生成字体后加载它。使用Javascript规则将是理想的，但我似乎不知道如何使用@font-face更改字体的src。现在，我的方法是使用Google Fonts，您可
浏览 7提问于2018-06-24得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
