@font-face{ font-family:webFont; src:url('font/字体名称.otf)format(“opentype”); }
字体格式字体属性otfopentypettftruetypeeotembedded-opentype1.font-family 设置文本的字体名称
2.font-style 设置文本样式 normal不适用斜体 static使用斜体 oblique使用倾斜体 inherit从父元素继承
3. font-variant 设置文本是否大小写 normal使用浏览器默认值 small-caps使用小型大写字母 inherit从父元素继承
4.font-weight 设置文本粗细 normal浏览器默认值 bold粗体 bolder更粗 lighter更细 100-900从细到粗
5.font-stretch 设置文本是否横向拉伸变形 normal正常文字宽度 wider把伸展比例设置为更进一步的伸展值 narrower把收缩比例设置为更进一步的收缩值 ultra-condensed比正常文字宽度窄4个基数 extra-condensed比正常文字宽度窄3个基数 condensed比正常文字宽度窄2个基数 semi-condensed比正常文字宽度窄1个基数 semi-expanded比正常文字宽度宽1个基数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>服务器端字体和@font-face属性</title> <style type="text/css"> @font-face { font-family: webfont; src: url(毛泽东字体.ttf); } h1{ font-family: webfont; font-style: oblique; font-size: 50px; } h2{ font-variant: small-caps; font-weight: lighter; } </style> </head> <body> <h1>魔道祖师</h1> <h2>master devil</h2> </body> </html>