[转] css自定义字体font-face的兼容和使用
CSS 自定义 字体 兼容 Face font 使用
2023-09-11 14:14:15 时间
@Font-face目前浏览器的兼容性:
Webkit/Safari(3.2+)
TrueType/OpenType TT (.ttf) 、OpenType PS (.otf);
Opera (10+)
TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg);
Internet Explorer
自ie4开始,支持EOT格式的字体文件;ie9支持WOFF;
Firefox(3.5+)
TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)
Google Chrome
TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6
由上面可以得出:.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持
语法
@font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
font-face 在css中具体的 使用方法
/*声明 WebFont*/
@font-face {
font-family: 'pinghei';
src: url('../font/pinghei.eot');
src:
url('../font/pinghei.eot?#iefix') format('embedded-opentype'),
url('../font/pinghei.woff') format('woff'),
url('../font/pinghei.ttf') format('truetype'),
url('../font/pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用指定字体*/
.test {
font-family: 'pinghei';
}
相关文章
- CSS - 给文字加阴影
- CSS背景background详解,background-position详解
- 让IE7/8使用CSS中first-child和last-child样式属性
- css 使用paint创建自定义css
- 前端学习 -- Css -- 字体
- [CSS] Purgecss to remove unused css
- [CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)
- DIV+CSS导航学习笔记
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
- 如何将 css 从 Application bundle 资源中剥离出来
- Firefox开发者工具里的CSS Flexbox Inspector
- SAP UI5 初学者教程之十二 - 使用 CSS 类对 UI 进行进一步美化试读版
- 40 个信息丰富且有趣的 CSS 404 错误页面示例
- css伪元素
- CSS 父选择器 :has()
- 【CSS】尺寸和边框、盒子模型、外边距_02
- 【CSS】css转换、css过渡、css动画_09
- html+css+js完成代码弹出功能