Question

我使用angular2和webpack。像这样加载我的字体：

@font-face {
  font-family: 'bpmonoregular';
  src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot');
  src: url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot?#iefix') format('embedded-opentype'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.woff') format('woff'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.ttf') format('truetype'),
  url('assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

如果在我的CSS中我增加字体大小百分比，字体不会显示，除非它加载了第一个组件。一旦我切换页面，它就会消失。如果我调整窗口大小，它会显示出来。

这只发生在chrome

中

Answer 1

您可以尝试使用document.ready上的代码触发window.resize作为解决方法。

Answer 2

尝试使用静态css（样式标记或链接）而不是组件样式来加载font-face。

Answer 3

尝试在没有

的情况下使用它

 font-weight: normal;
  font-style: normal;

Answer 4

尝试定位webkit浏览器，仅从<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <xsl:choose> <xsl:when test="/Merge/response/Benutzerdaten and count(/Merge/response/results/result[dn = '*,o=test,c=de') = 1" and count(/Merge/response/results/result[dn = '*,DC=TEST,DC=DE') = 1" > <UserData> <user> <xsl:value-of select="/Merge/Nutzdaten/Identifikation/BenutzerID"/> </user> <xsl:if test="/Merge/response/Benutzerdaten/*"> <Account> <xsl:copy-of select="/Merge/response/Benutzerdaten/*"/> </Account> </xsl:if> <xsl:if test="substring(/Merge/response/results/result/dn, string-length(/Merge/response/results/result/dn) -11) = ',o=test,c=de'"> <source1> <postalCode> <xsl:value-of select="/Merge/response/results/result/attributes/portalCode"></xsl:value-of> </postalCode> </source1> </xsl:if> <xsl:if test="substring(/Merge/response/results/result/dn, string-length(/Merge/response/results/result/dn) -12) = ',DC=TEST,DC=DE'"> <source2> <postalCode> <xsl:value-of select="/Merge/response/results/result/attributes/portalCode"></xsl:value-of> </postalCode> </source2> </xsl:if> <source3> <Deaktiviert> <xsl:value-of select="/Merge/response/BenutzerDaten/Deaktiviert"></xsl:value-of> </Deaktiviert> </source3> </UserData> </xsl:when> <xsl:otherwise> <response> <failure> <xsl:choose> <xsl:when test="count(/Merge/response/results/result[dn = '*,o=test,c=de') > 1"> <message>more than one result from source1</message> </xsl:when> <xsl:otherwise> <message>The requested object does not exist.</message> </xsl:otherwise> </xsl:choose> </failure> </response> </xsl:otherwise> </xsl:choose> </xsl:template> </xsl:stylesheet>来源

加载字体

svg

In depth article here

Answer 5

尝试将您的字体转换为.woff并将其导入为：

@font-face {
    font-family: "FontName";
    font-weight: normal;
    font-style: normal;
    src: url("/persist/fonts/FontName.woff") format("woff");
}

直到窗口在chrome中调整大小时，字体才会显示

5 个答案: