Html 手机/iPhone上不显示的字体

我要发疯了。我试图在我的网站上使用代理FB和Calibri字体，这些字体在桌面上的所有浏览器上都可以使用，但当我在iPhone上访问我的网站时，它们不会显示出来——使用了其他一些标准字体

我使用代理FB作为我的徽标和我在XD中创建的向量中的字体。其中包含的两个文本都是向量的一部分。我的网站的主体也使用各种Calibri重量和样式。问题是我的徽标和矢量图像的字体被替换，这完全破坏了布局，因为字体不适合

我在css样式表中使用了字体，但这似乎不起作用。我在下面包含了字体的代码

@font-face {
    font-family: 'Calibri Light';
    src: url('fonts/Calibri-Light.eot');
    src: url('fonts/Calibri-Light.eot') format('embedded-opentype'),
        url('fonts/Calibri-Light.woff2') format('woff2'),
        url('fonts/Calibri-Light.woff') format('woff'),
        url('fonts/Calibri-Light.ttf') format('truetype'),
        url('fonts/Calibri-Light.svg') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Calibri Light Italic';
    src: url('fonts/Calibri-LightItalic.eot');
    src: url('fonts/Calibri-LightItalic.eot') format('embedded-opentype'),
        url('fonts/Calibri-LightItalic.woff2') format('woff2'),
        url('fonts/Calibri-LightItalic.woff') format('woff'),
        url('fonts/Calibri-LightItalic.ttf') format('truetype'),
        url('fonts/Calibri-LightItalic.svg') format('svg');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Agency FB';
    src: url('fonts/AgencyFB-Reg.eot');
    src: url('fonts/AgencyFB-Reg.eot') format('embedded-opentype'),
        url('fonts/AgencyFB-Reg.woff2') format('woff2'),
        url('fonts/AgencyFB-Reg.woff') format('woff'),
        url('fonts/AgencyFB-Reg.ttf') format('truetype'),
        url('fonts/AgencyFB-Reg.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibri Bold';
    src: url('fonts/Calibri-Bold.eot');
    src: url('fonts/Calibri-Bold.eot') format('embedded-opentype'),
        url('fonts/Calibri-Bold.woff2') format('woff2'),
        url('fonts/Calibri-Bold.woff') format('woff'),
        url('fonts/Calibri-Bold.ttf') format('truetype'),
        url('fonts/Calibri-Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Calibri';
    src: url('fonts/Calibri.eot');
    src: url('fonts/Calibri.eot') format('embedded-opentype'),
        url('fonts/Calibri.woff2') format('woff2'),
        url('fonts/Calibri.woff') format('woff'),
        url('fonts/Calibri.ttf') format('truetype'),
        url('fonts/Calibri.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Calibri Italic';
    src: url('fonts/Calibri-Italic.eot');
    src: url('fonts/Calibri-Italic.eot') format('embedded-opentype'),
        url('fonts/Calibri-Italic.woff2') format('woff2'),
        url('fonts/Calibri-Italic.woff') format('woff'),
        url('fonts/Calibri-Italic.ttf') format('truetype'),
        url('fonts/Calibri-Italic.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Agency FB Bold';
    src: url('fonts/AgencyFB-Bold.eot');
    src: url('fonts/AgencyFB-Bold.eot') format('embedded-opentype'),
        url('fonts/AgencyFB-Bold.woff2') format('woff2'),
        url('fonts/AgencyFB-Bold.woff') format('woff'),
        url('fonts/AgencyFB-Bold.ttf') format('truetype'),
        url('fonts/AgencyFB-Bold.svg#AgencyFB-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

---

我知道.tff文件用于iPhone/Safari，但这似乎不起作用。有什么建议吗？谢谢

尝试使用不同的

字体系列

名称

@font-face {
    font-family: 'CalibriLight';
    src: url('fonts/Calibri-Light.eot');
    src: url('fonts/Calibri-Light.eot') format('embedded-opentype'),
        url('fonts/Calibri-Light.woff2') format('woff2'),
        url('fonts/Calibri-Light.woff') format('woff'),
        url('fonts/Calibri-Light.ttf') format('truetype'),
        url('fonts/Calibri-Light.svg') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'CalibriLightItalic';
    src: url('fonts/Calibri-LightItalic.eot');
    src: url('fonts/Calibri-LightItalic.eot') format('embedded-opentype'),
        url('fonts/Calibri-LightItalic.woff2') format('woff2'),
        url('fonts/Calibri-LightItalic.woff') format('woff'),
        url('fonts/Calibri-LightItalic.ttf') format('truetype'),
        url('fonts/Calibri-LightItalic.svg') format('svg');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Agency FB Reg';
    src: url('fonts/AgencyFB-Reg.eot');
    src: url('fonts/AgencyFB-Reg.eot') format('embedded-opentype'),
        url('fonts/AgencyFB-Reg.woff2') format('woff2'),
        url('fonts/AgencyFB-Reg.woff') format('woff'),
        url('fonts/AgencyFB-Reg.ttf') format('truetype'),
        url('fonts/AgencyFB-Reg.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CalibriBold';
    src: url('fonts/Calibri-Bold.eot');
    src: url('fonts/Calibri-Bold.eot') format('embedded-opentype'),
        url('fonts/Calibri-Bold.woff2') format('woff2'),
        url('fonts/Calibri-Bold.woff') format('woff'),
        url('fonts/Calibri-Bold.ttf') format('truetype'),
        url('fonts/Calibri-Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Calibri';
    src: url('fonts/Calibri.eot');
    src: url('fonts/Calibri.eot') format('embedded-opentype'),
        url('fonts/Calibri.woff2') format('woff2'),
        url('fonts/Calibri.woff') format('woff'),
        url('fonts/Calibri.ttf') format('truetype'),
        url('fonts/Calibri.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CalibriItalic';
    src: url('fonts/Calibri-Italic.eot');
    src: url('fonts/Calibri-Italic.eot') format('embedded-opentype'),
        url('fonts/Calibri-Italic.woff2') format('woff2'),
        url('fonts/Calibri-Italic.woff') format('woff'),
        url('fonts/Calibri-Italic.ttf') format('truetype'),
        url('fonts/Calibri-Italic.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Agency FB Bold';
    src: url('fonts/AgencyFB-Bold.eot');
    src: url('fonts/AgencyFB-Bold.eot') format('embedded-opentype'),
        url('fonts/AgencyFB-Bold.woff2') format('woff2'),
        url('fonts/AgencyFB-Bold.woff') format('woff'),
        url('fonts/AgencyFB-Bold.ttf') format('truetype'),
        url('fonts/AgencyFB-Bold.svg#AgencyFB-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

---

尝试使用不同的

字体系列

名称，如

@font-face {
    font-family: 'CalibriLight';
    src: url('fonts/Calibri-Light.eot');
    src: url('fonts/Calibri-Light.eot') format('embedded-opentype'),
        url('fonts/Calibri-Light.woff2') format('woff2'),
        url('fonts/Calibri-Light.woff') format('woff'),
        url('fonts/Calibri-Light.ttf') format('truetype'),
        url('fonts/Calibri-Light.svg') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'CalibriLightItalic';
    src: url('fonts/Calibri-LightItalic.eot');
    src: url('fonts/Calibri-LightItalic.eot') format('embedded-opentype'),
        url('fonts/Calibri-LightItalic.woff2') format('woff2'),
        url('fonts/Calibri-LightItalic.woff') format('woff'),
        url('fonts/Calibri-LightItalic.ttf') format('truetype'),
        url('fonts/Calibri-LightItalic.svg') format('svg');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Agency FB Reg';
    src: url('fonts/AgencyFB-Reg.eot');
    src: url('fonts/AgencyFB-Reg.eot') format('embedded-opentype'),
        url('fonts/AgencyFB-Reg.woff2') format('woff2'),
        url('fonts/AgencyFB-Reg.woff') format('woff'),
        url('fonts/AgencyFB-Reg.ttf') format('truetype'),
        url('fonts/AgencyFB-Reg.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CalibriBold';
    src: url('fonts/Calibri-Bold.eot');
    src: url('fonts/Calibri-Bold.eot') format('embedded-opentype'),
        url('fonts/Calibri-Bold.woff2') format('woff2'),
        url('fonts/Calibri-Bold.woff') format('woff'),
        url('fonts/Calibri-Bold.ttf') format('truetype'),
        url('fonts/Calibri-Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Calibri';
    src: url('fonts/Calibri.eot');
    src: url('fonts/Calibri.eot') format('embedded-opentype'),
        url('fonts/Calibri.woff2') format('woff2'),
        url('fonts/Calibri.woff') format('woff'),
        url('fonts/Calibri.ttf') format('truetype'),
        url('fonts/Calibri.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CalibriItalic';
    src: url('fonts/Calibri-Italic.eot');
    src: url('fonts/Calibri-Italic.eot') format('embedded-opentype'),
        url('fonts/Calibri-Italic.woff2') format('woff2'),
        url('fonts/Calibri-Italic.woff') format('woff'),
        url('fonts/Calibri-Italic.ttf') format('truetype'),
        url('fonts/Calibri-Italic.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Agency FB Bold';
    src: url('fonts/AgencyFB-Bold.eot');
    src: url('fonts/AgencyFB-Bold.eot') format('embedded-opentype'),
        url('fonts/AgencyFB-Bold.woff2') format('woff2'),
        url('fonts/AgencyFB-Bold.woff') format('woff'),
        url('fonts/AgencyFB-Bold.ttf') format('truetype'),
        url('fonts/AgencyFB-Bold.svg#AgencyFB-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

---

所有字体系列名称相同

字体系列：'Calibri'

为什么在不同的地方使用相同的

字体系列

？e、 g.

字体系列：“Calibri”。每个
字体系列
应具有不同的名称。所有字体系列都应具有相同的名称
字体系列：“Calibri”
为什么在不同的地方使用相同的
字体系列
？e、 g.
字体系列：“Calibri”。每个
字体系列
都应该有不同的名称。我尝试了这个（请参阅更新的代码），但仍然无法在iOS safari或chrome上使用。我尝试了这个（请参阅更新的代码），但仍然无法在iOS safari或chrome上使用