零基础建站培训介绍

当前位置:

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中的ZOOM:1作用是什么 (11721 次学习)
    我们学习CSS3视频教程时,做网站经常会看到CSS代码里会有一个ZOOM:1,删除ZOOM:1属性对网页却没有任意影响。那么ZOOM:1到底有什么作用呢?下面就跟
  • Css样式的float浮动属性,用于设置标签对象(如:<div>标签盒子、<span>标签、<a>标签、<em>标签等html标签)的浮动布局,浮
  • 对于做网站来说,很头疼的问题就是网站做好后,不同浏览器出现不兼容的情况。主要原因就是由于不同浏览器对某些标签的属性初始值【margin,padding,fon
  • 弹性盒布局模型(Flexible Box Layout)是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局
  • Animate动画名称大全 (146360 次学习)
    animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡
  • CSS常用属性大全 (14883 次学习)
    什么是CSS?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS。在
  • 在自己建网站时,CSS是控制网站各类样式的文件,CSS全部是英文,为了方便学建网站新手使用CSS,下面是学做网站论坛总结的常用CSS英文汉语词汇对照表.
  • DIV CSS外边距指CSS属性单词margin,margin是设置对象四边的外延边距,没有背景颜色也无颜色。1、margin语法Margin:10pxMargin的值是数字+html单
  • 在CSS3中使用display来定义盒的类型,一般分为block类型和inline类型。像p,div属于block类型,span,a属于inline类型。1、使用inline-block类型来横向
  • :before 伪元素在元素之前添加内容:before这个伪元素允许创作人员在元素内容的特别前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属