我该如何暂时加载字体？
暂时加载字体通常用于解决网页的字体加载问题，以减轻浏览器的负担并提高页面性能。以下是一种暂时加载字体的方法：
- 在HTML代码中，引入字体文件（如字体.woff2）
- 在CSS文件中使用
::before和::after伪元素构建自定义文本元素，并在其中设置字体属性，如字体名、字体大小、样式等。 - 使用
visibility: hidden属性将创建的自定义文本元素隐藏，直到需要使用它。 - 在需要使用字体的地方，将“自定义文本元素”的
visibility属性设置为visible。
以下是一个示例HTML和CSS文件：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<title>暂时加载字体示例</title>
</head>
<body>
<div class="custom-text">这是一个自定义的文本元素，其中包含自定义的文本和字体。</div>
<button id="showButton">显示自定义文本元素</button>
<script src="script.js"></script>
</body>
</html>CSS (styles.css):
/* 在文档的style标签内引入字体文件 */
@font-face {
font-family: 'CustomFont';
src: url('CustomFont.woff2') format('woff2'), url('CustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.custom-text {
/* 设置自定义文本元素的样式 */
font-family: "CustomFont", sans-serif;
width: 300px;
font-size: 18px;
padding: 10px;
border: 1px solid #ccc;
}
#showButton {
float: right;
}JavaScript (script.js):
document.getElementById('showButton').addEventListener('click', () => {
const customText = document.querySelector('.custom-text');
customText.style.visibility = 'visible';
});在这个示例中，我们创建了一个字体名称为“CustomFont”的自定义字体文件（如“CustomFont.woff2”），并在文档中使用::after伪元素，在需要时将其显示出来并加载。当按钮点击时，我们将customText元素的visibility属性设为“visible”。这种方法可以在页面加载时暂时加载字体，在需要时可以隐藏，达到减小页面加载时间、减轻浏览器负担和提高页面性能的目的。
相关·内容
1回答
浏览网站时，所有字体都会正确显示。打印页面时，预览和相应的输出都是在Times中。下面是我的CSS规则：src: url("fonts/MetricWeb-Regular.eot");在这里，它正确地呈现：
这里是打印预览，这也是打印
浏览 3提问于2016-05-16得票数 2
6回答
我正在尝试使用webpack在我的Next.js项目中添加字体--棒极了。我试着按照我在网络上找到的各种指令(使用文件加载器，url加载器)进行操作，但是对我来说什么都不起作用。我暂时放弃了用webpack加载字体-棒极了，但我想知道我如何才能做到这一点。目前，我有一个.scss文件，我用它来加载</e
浏览 1提问于2017-06-26得票数 17
1回答
我正在使用为我正在开发的网站提供字体。当页面加载时，加载速度很慢(超过一秒)。事实证明，这是因为它在每次请求时都下载字体。我无法理解，像这样的服务没有配置etags来让客户端缓存fonts...but I digress。在TypeKit解决这个问题之前，我暂时在本地托管CSS。
有人对TypeKit有这个问题吗？你是如何解决这个问题的？也许我错了？
浏览 1提问于2010-01-31得票数 6
回答已采纳
1回答
我使用将一些SVG文件转换为字体。SVGs是图形，不是字母。我知道这个，但我想知道是否有一种更简单的方法来避免FOUT (在@字体面板文件完全加载之前出现的未样式文本的闪存)。，我是否可以为我的符号指定字符代码，如果浏览器暂时使用回退字体？，这些符号将被呈现为空白。
浏览 0提问于2014-08-05得票数 0
1回答
当我试图导航到特定的路径或页面时，应用程序会说：“--您正在寻找的资源已被删除，名称已更改，或暂时不可用。和字体也未加载，只加载初始页面，没有其他导航发生。”有人能帮我吗？
浏览 2提问于2020-04-02得票数 0
回答已采纳
我在我的Xamarin forms应用程序中使用自定义DB-Helvetica。我已经在iOS和安卓中添加了.ttf文件。对于Android来说，它的工作方式与预期一致。但是对于iOS，我看不到字体。 我已经在info.plist中添加了字体，并将这些资源添加为Bundle Resource。
浏览 19提问于2019-07-01得票数 0
1回答
站点我将静态页面部署到Netlify (使用CDN)。通常，我会看到文本首先加载，然后是背景图像，然后是字体加载。这造成了一个令人不快的转变。是否有一种方法可以确保所有组件(样式文本、背景图像)同时呈现或更快地呈现，以便用户不会体验在白色背景上看到白色文本的短暂时刻，然后是字体的更改，然后是背景图像加载，然后是引导5加载。自托管字体而不是CDN调用。
浏览 1提问于2022-06-29得票数 0
我的OSX应用程序使用Helvetica和MyriadPro为一些文本字段，我得到一些用户禁用这些字体的字体书，并连续地取代他们的系统字体…
我在基于Cocoa应用程序中嵌入文件等的stackoverflow我想用界面生成器设置我的文本字段像往常一样(我没有用[NSFont fontWithName:@""]创建的文本字段)，并通过IB定义我的文本字段字体，然后以某种方式嵌入<e
浏览 1提问于2011-12-21得票数 2
回答已采纳
我在Windows7上使用Firefox 7.0.1，我访问了一个使用奇怪字体的网页。我发现它不是一个图像--我可以选择文本。我在网站的CSS文档中找到了字体名称，并确保我的计算机上没有安装此字体。我想知道，当页面显示它使用的字体不在浏览器所在的计算机上时，浏览器是否从web服务器下载字体文件的副本，仅供浏览器的渲染器使用？如果是这样，当我在使用该字体</
浏览 0提问于2011-11-02得票数 0
回答已采纳
2回答
我试图优化我的网站下载速度，阻止谷歌字体下载阻止页面的其余部分加载。也许我误解了CSS的字体显示:交换功能，因为我认为这应该允许字体下载，而不会阻止继续下载。但是，我的CSS中的字体显示标记似乎不允许不阻塞地下载字体。 @font-face { text
浏览 7提问于2020-06-16得票数 6
回答已采纳
我想从谷歌加载3种不同的字体(我知道这不是理想的)，谷歌字体特别告诉我，加载时间会适中！但对于display=swap，理论上，它不会影
浏览 1提问于2020-02-21得票数 0
2回答
我使用了下面的代码，它显示了堆栈跟踪： at java.io.FileInputStream.open(我在我知道有效的资源文件中调用该方法)
Font font =Font.createFont(Font.TRUETYPE_FONT, new
浏览 0提问于2014-01-19得票数 2
回答已采纳
我在谷歌的PageSpeed Insight上运行了我的网站，其中一个错误是：
确保文本在text字体加载期间仍然可见。有人能告诉我上面的代码是什么吗?我应该把它保存在我的网站的HTML文件中吗？
浏览 0提问于2023-02-06得票数 3
回答已采纳
1回答
如何在下一个js中使用？
、、、、
我想在我的Next.js项目中使用NPM作为Adobe字体。
我在NPM网站上找到了一个解决方案，但它已经有4年的历史了。有什么最新的更新，我可以使用吗？不想使用CDN。
浏览 5提问于2022-12-02得票数 0
我正在为设计师开发一个简单的工具，用户可以输入一些文本，然后通过各种字体生成，为他们的项目找到最好的选择。
我正在努力寻找最好的加载字体的方式。显然，我并不是真的想一次加载所有的字体，所以我只需要在生成字体后加载它。使用Javascript规则将是理想的，但我似乎不知道如何使用@font-face更改字体的src。现在，我的方法是使用Google Fonts，您可
浏览 7提问于2018-06-24得票数 0
我正在处理一个as3项目，其中用户从Combo Box中选择了一种字体，该字体SWF应该是动态加载的，然后我需要更改动态文本字段的字体。我有从www.isarie.com下载的swf字体文件
我的问题是，如何从服务器动态加载字体swf并将其添加到库中，以及如何使用该swf来更改动态文本字段的字体。如果库中有嵌入
浏览 2提问于2010-10-05得票数 1
回答已采纳
我已经尽可能优化我的网站。当在瀑布模式下运行ping页面测试时，我可能会得到90/100分，但页面加载速度很慢，对于400kb以下的页面，最多6-9秒。在1秒或更短的时间内加载所有内容，罪魁祸首是等待时间为6-8秒的字体，主要是.woff无法为woff添加mime，Bluehost不支持服
浏览 0提问于2015-05-11得票数 1
3回答
如何关闭本地字体来测试谷歌字体？
、、、、
现有技术：
我唯一能找到的解决方案是命名字体--一些不会与本地字体发生冲突的字体。我不喜欢那个解决方案的原因：
有人知道怎么做吗？
浏览 1提问于2015-10-19得票数 32
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
