关于字体

body { font-family:"华文彩云",“宋体” ,“黑体” ;}

当引用上面的字体样式的时候,会首选“华文彩云”,如果用户电脑上没有安装该字体则选择“宋体”,如果也没有安装“宋体”,则选择“黑体”。当指定的字体都没有安装的时候,就会选择浏览器默认的字体。

使用font-family设置字体的时候,需要注意以下几点:

各种字体之间必须使用英文状态下的逗号隔开。

中文字体需要加英文状态下的 引号,英文字体一般不需要加引号。当需要设置英文字体的时候,英文字体名字必须位于中文字体名字之前,如下面的代码:

body { font-family:  Arial , "微软雅黑" ,  "宋体" , "黑体" ;  }      这个是   正确  的书写方式

body {  font-family:  "微软雅黑" ,  "宋体" , "黑体" , Arial ; }      这个是   错误  的书写方式 

如果字体中包含   空格    #     $  等符号,则该字体必须加英文状态下单引号 或者 双引号

如:font-family :"Times New Roman" ;

尽量使用系统默认的字体,保证在任何用户的浏览器中都能正确的显示。

@font-face 属性 是CSS3中的新增属性,用于定义服务器字体。通过@font-face属性,用户可以自定义计算机中没有安装的字体,从而使用任何喜欢的字体。基本的语法格式是:

@font-face {

    font-family:字体名称;

    src : 字体的路径 ;

}

 在上面的语法格式中,font-family 用于指定该服务器字体的名称,该名称可以随意定义;src 属性用于指定该字体文件的路径。

<!DOCTYPE html>
<html lang="en">
   <head>
          <meta charset="UTF-8">
          <title>@font-face属性</title>
          <style>
                     @font-face {
                               font-family:jianzhi; /* 服务器字体名称*/
                               src:url(font/FZJZJW.TTF); /* 服务器字体路径*/
                          }
                      p {
                               font-family: jianzhi; /* 设置字体的样式 ,使用的是服务器上自定义的字体*/
                               font-size:32px;
                          }

              </style>
   </head>
   <body>
              <p>好好好好好</p>
              <p>好好好好好</p>
   </body>
</html>

 

 步骤:

 1 . 下载相应的字体,并储存在相对应的服务器的文件夹中;

 2.  使用@font-face属性定义服务器字体;

 3.  对元素应用"font-family" 字体样式

text-decoration:none/line-through删除线/overline上划线/underline下划线

text-transform属性用于控制英文字符的大小写。

text-transform:文本转换:

none:不转换(默认值);

capitalize:首字母大写;

uppercase:全部字符转换为大写;

lowercase:全部字符转换为小写;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>@font-face属性</title>
<style>
         .p1 {
                text-transform: uppercase;
                text-decoration: line-through;
            }
         .p2 {
                text-transform: lowercase;
                text-decoration: underline;
             }
            .p3 {
              text-transform: capitalize;
              text-decoration: overline;
               }

   </style>
   </head>
   <body>
           <p class='p1'>aaaa</p>
           <p class='p2'>aaaa</p>
             <p class='p3'>aaaa</p>
   </body>
</html>

text-align:center 只能应用于块级元素,如果要对图像img使它居中,可以先用块级元素把它包裹起来,

text-indent :缩进 属性值可以是不同单位的数值、em字符宽度的倍数,或相对于浏览器窗口的百分比。允许使用负值,建议使用em设置单位 

原文地址:https://www.cnblogs.com/agansj/p/7160522.html