【问题标题】:Font render after page (contents) renders页面(内容)渲染后的字体渲染
【发布时间】:2023-07-02 09:52:01
【问题描述】:

即使我在顶部放置了字体,我的页面内容也会在字体呈现之前呈现 这是我的代码...

<!doctype html>
<html>
<head>
<title>Computer Stuffs Developer Profile</title>
<?php include_once('includes.php');?>
<link rel="stylesheet" href="css/projects.css" />

includes.php 文件包含

<link href='http://fonts.googleapis.com/css?family=Tangerine|Indie+Flower|Kaushan+Script' rel='stylesheet' type='text/css'>
<!--[if IE]>
        <script src="js/ie_html5.js"></script>
    <![endif]-->
<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="stylesheet" href="css/universal.css" />
<link rel="stylesheet" href="css/hyperlinks.css" />

以前我的字体低于 html5.js,现在我将它移到了顶部,但我仍然面临问题.. 我清除了缓存并且很累。

【问题讨论】:

  • 你试过本地下载的字体吗?测试 otf/eot/svg 版本。
  • 我可以得到这些格式的谷歌字体吗?
  • 我想这似乎是 *.com/questions/11711641/… 的副本。
  • 从谷歌下载,然后使用在线字体转换器服务。示例:转到google.com/fonts#UsePlace:use/Collection:Indie+Flower 点击“下载字体”箭头,选择 zip 格式。接下来搜索“在线字体转换器”并将其转换为您想要的格式。

标签: html css browser


【解决方案1】:

我建议您缓存字体。这是一篇关于加载字体性能的好文章,并附有示例:

Link

【讨论】:

    【解决方案2】:

    您可以添加一个覆盖 100% 页面的等待面板,并且在“就绪”事件中,您可以移除该面板并显示正确呈现的页面。

    【讨论】:

    • 我想过,但还有其他方法吗?