我目前在 style.css 文件中使用这段代码:
@font-face {
font-family: Frutiger;
src: url('fonts/frutiger.ttf');
}
它在
中工作正常- Chrome
- 火狐
但它在
中不起作用- 互联网浏览器
我尝试使用以下行在 oet open embedded type 中添加字体:line src: url('fonts/frutiger.oet');到我的代码,但它也不想在 chrome 中工作。
我不知道如何正确设置字体以在所有浏览器中正常显示。请告诉我,我的网址是 www.virmodrosti.com
最佳答案
较新的 bulletprof 字体语法是:
@font-face {
font-family: 'my-font';
font-display: swap;
src: url('/fonts/my-font.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/my-font.woff') format('woff'); /* Pretty Modern Browsers */
}
旧的防弹字体语法是:
@font-face {
font-family: 'my-font';
src: url('/fonts/my-font.eot'); /* IE9 Compat Modes */
src: url('/fonts/my-font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/my-font.woff2') format('woff2'), /* Super Modern Browsers */
url('/fonts/my-font.woff') format('woff'), /* Pretty Modern Browsers */
url('/fonts/my-font.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/my-font.svg#svgMyFont') format('svg'); /* Legacy iOS */
}
关于css - 如何修复 css 字体样式以在所有浏览器中正确显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44733387/