Я схожу с ума.Я пытаюсь использовать на моем веб-сайте шрифты Agency FB и Calibri, которые, похоже, работают во всех браузерах на рабочем столе, но не отображаются, когда я захожу на мой сайт на моем iPhone - используется какой-то другой стандартный шрифт.
Я использовал Агентство FB для своего логотипа и шрифта в векторе, который я создал в XD.Оба текста, содержащиеся в них, являются частью вектора.Тело моего сайта также использует различные веса и стили Calibri.Проблема в том, что шрифт заменен на мой логотип, а векторное изображение полностью разрушает макет, поскольку шрифт просто не подходит.
Я использовал font-face в моей таблице стилей CSS, но это не похожеработать.Я включил код для font-face ниже.
@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, но, похоже, это не работает.Какие-либо предложения?Спасибо