• 周一. 6月 24th, 2024

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

CSS3嵌入Web字体

admin

11月 28, 2021

一、@font-face语法

1.格式

@font-face { 
font-family: <identifier>; 
src: <fontsrc> [<string>] [, <fontsrc> [<string>]]*; 
[<font>];
     }																			

2.相关参数

  • identifier:字体名称

  • url:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径

  • string:字体的格式,主要用来帮助浏览器识别, format(fontType)

    • fontType取值:
      • truetype:.ttf
        • Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+ IE9+
      • opentype:.otf
        • Firefox3.5+ Chrome 4+ Safari 3+ Opear10+ IOS Mobile Safari 4.2+
      • Web Open Font Format:.woff
        • Firefox 3.5+ Chrome 6+ Safari 3.6+ Opera 11.1+ IE9+
      • embedded Open Type:.eot
        • IE4+
      • svg:.avg
        • Chrome 4+ Safari 3.1 + Opera 10+ IOS Mobile Safari 3.2+
  • font:定义字体相关样式

    • 取值:
      • font-weight
      • font-style
      • font-size
      • font-variant
      • font-stretch

3.字体格式兼容性

@font-face {
	font-family: 'diyfont';
	src:url('diyfont.eot'); /* IE9兼容模式 */
	src:url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE9 - */
		url('diyfont.woff') format('woff'), /* chrome、firefox opera  safari  IE9+ 最佳格式 */
		url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ IE9+*/
		url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}

二、相关工具

1.Web字体定制

  • http://www.iconfont.cn/webfont/#!/webfont/index 阿里Web字体
  • http://www.youziku.com/ 字体库网站

2.Web字体转换工具

  • https://www.fontsquirrel.com/tools/webfont-generator FontSquirrel在线工具

3.使用字体图标

  • 常用的字体图标库

    • 阿里图标:http://www.iconfont.cn/
    • Font Awesome:http://fontawesome.dashgame.com/
    • Glyphicons Halfings:http://glyphicons.com/
  • 字体图标制作工具

    • http://icomoon.io/app/#/select
    • http://www.iconfont.cn/help/iconmake.html阿里图标

三、相关示例

例1.下载文字

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阿里图标</title>
	<link rel="stylesheet" href="../icon/iconfont.css">
	<style>
		body{
			font-size:100px;
		}
		i{
			font-size:150px;
			color:red;
		}
		.icon-cuowu::before{
			font-size:100px;
		}
	</style>
</head>
<body>
	
	<i class="iconfont icon-cuowu"></i>
	<i class="iconfont icon-erweima"></i>
</body>
</html>

例2.使用link引入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Font Awesome</title>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<style>
		.box{
			font-size:100px;
			text-shadow: 10px 10px 3px #ccc;
			font-style:oblique;
		}
	</style>
</head>
<body>
	<div class="box">
		<i class="fa fa-balance-scale"></i>
		<i class="fa fa-briefcase"></i>
	</div>
</body>
</html>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注