怎样设置网页中的文字样式

我只是一个虾纸丫 提交于 2020-02-13 03:24:59

  网页作为一种信息的载体,文字还是很重要的一部分的,这里就总结一下他的几种设置方法

一、font标签

  font使用来设置文字的标准属性,但是由于一系列的原因已经不建议使用font标签来指定属性了,还是用css比较好,但是本文还是会介绍一下这种方法。font中可以设置很多种类的属性,比如(括号里面是效果):

  1、颜色:设置红色<font color="red">你好</font>        (你好

  2、设置大小:设置字号为2和8<font size=2>字号2</font><font size=8>字号8</font>   (字号2字号8

   3、字体类型:face属性,可以用来指定字体,可选值有很多,这个属性只支持你机器上存在的字体 (宋体 楷体

二、css设置

  css设置字体样式远比用font标签更加强大,涉及的面更广。粗略总结如下:

  1、总的属性font,这个属性中可以设置下面的多个属性的值,调用方式(都可以缺省)

    {font:font-style font-variant font-weight font-size font-family}

  2、字体类型font-family:可以设置多种字体,用逗号分隔,浏览器会在你的电脑上注意寻找看是否能用,能用则选用该字体显示后面的字体无    效,最后实在是一个都没有匹配上的话就采用默认字体。

    示例:{font-family:黑体,隶书;}

  3、字体大小font-size:设置文本的大小,有很多可能的取值,分为这么几类:

    i)xx-small、x-small、small、medium、large、x-large、xx-large这几种字符串的方式,大小方式如下

        xx-small x-small small medium large x-large xx-large

    ii)smaller、larger:定义成比父元素更大或者更小的尺寸

    iii)length:定义为一个固定值

    iiii)百分比:定义为父元素的百分比大小

    iiiii)inherit:从父元素继承字体大小

  4、字体风格font-style:主要是设置文本倾斜的。属性有normal、italic、oblique三种(还可以取继承),演示如下:

      normal italic oblique

  5、字体颜色color:这个就不用多说了,定义字体颜色值

  6、字体颜色阴影text-shadow:定义字体阴影的颜色,可以是文字看上去更高端。使用方法如下:

    <font style="text-shadow: 3px 3px 3px #FF0000">红色阴影</font>   红色阴影

  7、字体粗细:字体加粗不光是可以用b标签的,font-weight也可以很好地,并且更自由的改变字体粗细。取值可以是数字或者是normal、bold、     bolder、lighter,都是些见名知义的属性

  8、字体行高line-height:设置字的行高,也是数字和百分比都可以设置

  9、字间距letter-spacing:字母之间的距离,默认值为0,可以用正负值调整

  10、单词间距word-spacing:跟上面差不多,这个是调整单词的间距

  11、字体变形font-variant:也就是可以将你的小写字母用较小的大写字母来代替,值有normal和small-caps(继承不算,下同)。样例如下:

                                                     normal small-caps I'm REAL BIG

  12、字母大小写转换text-transform:

  13、font-size-adjust:这个比较复杂。首先要了解aspect值,字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的       aspect 值。当字体拥有高的 aspect 值时,那么当此字体被设置为很小的尺寸时会更易阅读。设置方法就是传入一个数值。

  14、font-stretch:可以对文本进行拉伸,类似文本大小也有以下几种方式:

 

     ii)narrowerwider:定义成比父元素更大或者更小的尺寸

 

    iii)ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded、ultra-expanded,从      宽到窄排列。

 

    iiii)inherit:从父元素继承字体大小

三、css3中的改进

  1、首先css3实现了调用服务器端的字体(我们上面的字体使用的前提都是客户机上存在那种字体),这样我们就可以自由的调用自己享用的字体,    不用每次都顾虑客户机是否存在该字体。首先给个例子吧:

 1 <style> 
 2 @font-face
 3 {
 4 font-family: myFirstFont;
 5 src: url('Sansation_Light.ttf'),
 6      url('Sansation_Light.eot'); /* IE9+ */
 7 }
 8 </style>
 9 div
10 {
11 font-family:myFirstFont;
12 }

 

    正如上面的代码所显示的要调用服务器端的字体你要用的就是@font-face,然后你就要开始给出这个字体的定义,首先是原来的font-family换  成是定义你自己的名字,然后给出它的文件的url地址。这样在下面你就可以调用该字体了。

    并且对于自体你不仅能够直接使用还可以选择一些“修饰”。暂时支持的属性有:font-stretch、font-style、font-weight、unicode-     range(这个是用来定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"

  当然以上的这些都是比较通用的属性,其他还是有不少的个别属性的。另外好的字体其实都是能够组合利用各种字体所营造出来的远非一种属性所能达到,具体就要看个人的艺术细胞了。另外个人感觉最近其实还是有一种绘制文本的方式,就是利用canvas的画图api,这样理论上是可以得到任意形态的字体的,而且支持性也很好只是工作量很大,是不是采用就得看着办了。  

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!