Question

我在本地加载自定义字体，但是当我的网站加载时，它似乎在闪烁到正确的字体之前显示默认字体。实例：https：//www.moneynest.co.uk/property-vs-shares/ 有人可以帮忙吗？ / * Open Sans常规* / @ font-face { font-family：＆＃34; Open Sans＆＃34 ;; src：url（＆＃34; ./ wp-includes / fonts / OpenSans-Regular.eot＆＃34;）; / * IE9 Compat Modes * / src：url（＆＃34; ./ wp-includes / fonts / OpenSans-Regular.eot？#iefix＆＃34;）格式（＆＃34; embedded-opentype＆＃34;），/ * IE6-IE8 * / url（＆＃34; ./ wp-includes / fonts / OpenSans-Regular.otf＆＃34;）格式（＆＃34; opentype＆＃34;），/ * Open Type Font * / url（＆＃34; ./ wp-includes / fonts / OpenSans-Regular.svg＆＃34;）格式（＆＃34; svg＆＃34;），/ *旧版iOS * / url（＆＃34; ./ wp-includes / fonts / OpenSans-Regular.ttf＆＃34;）格式（＆＃34; truetype＆＃34;），/ * Safari，Android，iOS * / url（＆＃34; ./ wp-includes / fonts / OpenSans-Regular.woff＆＃34;）格式（＆＃34; woff＆＃34;），/ *现代浏览器* / url（＆＃34; ./ wp-includes / fonts / OpenSans-Regular.woff2＆＃34;）格式（＆＃34; woff2＆＃34;）; / *现代浏览器* / font-weight：normal; font-style：normal; } / *使用font-converter.net转换字体。谢谢！ * / @ font-face { font-family：＆＃34; Open Sans＆＃34 ;; src：url（＆＃34; ./ wp-includes / fonts / OpenSans-Bold.eot＆＃34;）; / * IE9 Compat Modes * / src：url（＆＃34; ./ wp-includes / fonts / OpenSans-Bold.eot？#iefix＆＃34;）格式（＆＃34; embedded-opentype＆＃34;），/ * IE6-IE8 * / url（＆＃34; ./ wp-includes / fonts / OpenSans-Bold.otf＆＃34;）格式（＆＃34; opentype＆＃34;），/ * Open Type Font * / url（＆＃34; ./ wp-includes / fonts / OpenSans-Bold.svg＆＃34;）格式（＆＃34; svg＆＃34;），/ *旧版iOS * / url（＆＃34; ./ wp-includes / fonts / OpenSans-Bold.ttf＆＃34;）格式（＆＃34; truetype＆＃34;），/ * Safari，Android，iOS * / url（＆＃34; ./ wp-includes / fonts / OpenSans-Bold.woff＆＃34;）格式（＆＃34; woff＆＃34;），/ *现代浏览器* / url（＆＃34; ./ wp-includes / fonts / OpenSans-Bold.woff2＆＃34;）格式（＆＃34; woff2＆＃34;）; / *现代浏览器* / font-weight：700; font-style：bold; }

Answer 1

请在您的网址中添加https而不是HTTP的完整字体路径

@font-face {
  font-family: "Open Sans";
  src: url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.eot"); /* IE9 Compat Modes */
  src: url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.otf") format("opentype"), /* Open Type Font */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.svg") format("svg"), /* Legacy iOS */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.woff") format("woff"), /* Modern Browsers */
    url("https://www.moneynest.co.uk/wp-includes/fonts/OpenSans-Bold.woff2") format("woff2"); /* Modern Browsers */
  font-weight: 700;
  font-style: bold;
}

EXAMPLE

字体加载然后闪烁以纠正字体

1 个答案: