首页 前端知识 CSS3引入字体库font-family

CSS3引入字体库font-family

2024-11-02 10:11:23 前端知识 前端哥 471 898 我要收藏

文章目录

  • 一、参考
  • 二、问题描述
  • 三、快速入门
  • 字体格式
  • 字体的兼容性解决办法

一、参考

  1. CSS调用远程字体

二、问题描述

工作中,设计师经常为了界面优美好看,会使用一些“个性化”的字体,由于使用者的浏览器不一定会安装对应的字体,因此代码写了字体体现不出来,如果挨个去给用户安装字体也不现实。

解决办法:浏览器引入字体库,然后使用引入的字体

三、快速入门

@font-face { 
  font-family: SketchRockwell; /*这里是说明调用来的字体名字*/ 
  src: url('SketchRockwell.ttf'); /*这里是字体文件路径*/ 
  /* webpack 打包的办法 */ 
  /*
  src: url("~@/widget-tools/css/fonts/HTYPE/YouSheBiaoTiHei/YouSheBiaoTiHei-2.ttf");
  */
} 
.my_CSS3_class { 
  font-family: SketchRockwell; /*这里设置某参数的字体值,在这里是“my_CSS3_class”调用了你刚才声明的字体值"SketchRockwell"*/ 
  font-size: 3.2em; /*这里是字体大小*/ 
} 

字体格式

  1. TrueType(.ttf)格式

.ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式。

  1. OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式,其内置在TrueType的基础上,提供了更多的功能。

  1. Web Open Font Format(.woff)格式

.woff字体是Web字体中最佳格式,是一个TrueType的压缩版本,同时也支持原数据包的分离。

  1. Embedded Open Type(.eot)格式

.eot字体是IE专用字体,可以从TrueType创建此格式字体。

  1. SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式。

字体的兼容性解决办法

@font-face {
  font-family: "iconfont";
  src: url('../fonts/iconfont.eot'); /* IE9*/
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
  url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
/*移动端字体图标*/
@font-face {font-family: "iconfont";
	src: url('../fonts/iconfont.eot');/*IE9*/
	src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'); /* IE6-IE8 */
	src: url('../fonts/iconfont.woff') format('woff'); /*chrome、firefox*/
	src: url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  	src: url('../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19768.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!