零基础建站培训介绍

当前位置:

css实现网页调用服务器端字体@font-face属性

在网页制作和网站开发过程中,网页上使用的字体往往由于浏览者电脑中没有相应的字体,达不到我们设计的效果。为了解决这个问题,我们可以直接使用我们服务器端上的字体。

css实现网页调用服务器端字体

语法:


<style>

@font-face {
font-family : webfont ;
src : url( 字体名.ttf ) ;
}

p{font-famliy:webfont;}

</style>

还可以设置粗体/斜体文本时,调用的字体。


<style>
//设置正常文本调用的字体
@font-face {
font-family : webfont ;
src : url( 字体名1.ttf ) ;
}

//设置斜体文本调用的字体
@font-face {
font-family : webfont ;
font-style:italic;//斜体
src : url( 字体名2.ttf ) ;
}

h1{font-famliy:webfont;}

h2{font-famliy:webfont;
   font-style:italic;
}

</style>

设置调用本地字体


<style>

@font-face {
font-family : '黑体' ;
src : local( '黑体') ;
}

p{font-famliy:'黑体';}

</style>

设置调用字体大小写


font-variant:small-caps
描述
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承 font-variant 属性的值。

设置调用字体粗细

font-weight

值 :bold:粗;bolder:更粗;lighter:更细;100-900 从细到粗 数值必须是100的倍数 400相当于普通字体

设置调用字体变形

font-stretch 大多浏览器不支持此属性

 

相关阅读:

css设置font-style字体斜体样式

HTML字体加粗标签怎么写

HTML字体标签:如何控制字体大小与颜色

上一课: 下一课:

发表评论

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