Question

我在正在开发的应用程序中加载字体时遇到了麻烦。加载页面后，字体加载很晚。

1.如何在页面加载的同时加载字体？

2.如果我在本地或通过cdn声明字体会更好吗？

下面的CSS和HTML片段

@font-face {
  font-family: 'OpenSans-Regular';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
  font-family: 'OpenSans-Bold';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff');
}

body {
  background: black;
}

label {
  font-size: 18px;
  font-family: 'OpenSans-Bold';
  color: #FFF;
}

.parent {
  width: 99%;
  margin-top: 40px;
}

.signin_page {
  width: 32%;
  background: black;
  height: 180px;
}

<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff">
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2">

<body>
  <div class="signin_page">
    <table>
      <tr>
        <td class="email">
          <label for="signin_url">CMS</label>
        </td>
        <td class="sign_text"><input id="signin_url" type="text" required autofocus="autofocus" /></td>
      </tr>
      <tr>
        <td class="email">
          <label for="signin_id">Username</label>
        </td>
        <td class="sign_text"><input id="signin_id" type="text" required/></td>
      </tr>
      <tr>
        <td class="email">
          <label for="signin_password">Password</label>
        </td>
        <td class="sign_text"><input id="signin_password" type="password" required/></td>
      </tr>
    </table>
    <div class="parent">
      <button id="sign-button" onclick="signin();">Sign In</button>

    </div>
  </div>
</body>

为exe应用程序css加载本地字体

0 个答案: