Вспышка неустановленного содержимого при исчезновении текста - PullRequest
Новая
       19

Вспышка неустановленного содержимого при исчезновении текста

0 голосов
/ 15 октября 2019

Я не могу придумать, как предотвратить появление нестандартного содержимого при выцветании текста, который должен быть стилизован шрифтом из Google Fonts.

Похоже, что fonts.googleapis.com загружаеткогда страница загружается, но это не происходит до тех пор, пока текст не должен исчезнуть при загрузке fonts.gstatic.com, что приводит к короткой и неприглядной вспышке текста в Times New Roman или любом другом шрифте по умолчанию, прежде чем он будетправильно стилизован.

HTML 

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">

    <!-- Static CSS -->
    <link rel='stylesheet' type='text/css' href="main.css"/>
</head>

<body>
    <div>
        <button id="startButton">Start</button>
    </div>

    <div id="textDiv">
        <p id="textContents"></p>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>

    <!-- Static JavaScript -->
    <script src="main.js"></script>
</body>

CSS 

#textDiv {
    font-size: 40px;
    font-family: 'Quicksand';
}

Javascript 

var textDiv = $('#textDiv');
var text = $('#textContents');
var button = $('#startButton');

// handle click and add text
button.bind("click", function() {
    textDiv.hide();
    text.html("<p>Hello</p>");
    textDiv.fadeIn();
})

https://jsfiddle.net/eshapiro42/xmf23uqw/15/

Любая помощь в выяснении, как предотвратить это, будет принята с благодарностью!

Ответы [ 3 ]

3 голосов
/ 15 октября 2019

Вы можете preload шрифты, когда вы ссылаетесь на фактический шрифт. Здесь вы ссылаетесь на таблицу стилей, которая добавляет @font-face к вашему документу с различными вариантами Quicksand.

. Решение состоит в том, чтобы вставить ссылку на таблицу стилей в ваш браузер и получить прямую ссылку нашрифт, а затем загрузить его в качестве ссылки в HTML-документ с этим: 

<link rel="preload" href="ttps://fonts.gstatic.com/s/quicksand/v15/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-xDwxUD2GFw.woff" as="font" crossorigin>
2 голосов
/ 15 октября 2019

Используйте параметр запроса display=block при обращении к шрифту из Google. Полный URL для вашего примера:

https://fonts.googleapis.com/css?family=Quicksand&display=block

Это, в свою очередь, приведет к тому, что таблица стилей Google будет использовать правило font-display: block в своем объявлении @ font-face. Это правило будет указывать, что вы предпочитаете, чтобы текст оставался не отображенным до загрузки шрифта, а не отображать текст локальным шрифтом и повторно отображать его, когда веб-шрифт готов.

Источник:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#customize_the_text_rendering_delay https://css -tricks.com / google-fonts-and-font-display /

1 голос
/ 15 октября 2019

В CSS вы можете добавить display: none;, а в своем JavaScript добавить 

$(function() {
  $('#textDiv').css('display', 'block');
});
...