zoukankan      html  css  js  c++  java
  • CSS3秘笈:第六章

    第六章  文本格式化

    1.font-family 属性设置字体。除了指定想要的字体之外还要使用备用字体。例如:

    p{ font-family:Arial ,Helvetica ,sans-serif; }

    如果字体的名称中包含多个单词,则必须用双引号(””)将它们括起来。

    2.·serif字体,适合冗长的文字信息。

    ·sans-serif字体看起来干净而整洁因此经常被放在标题上。

    ·monospaced字体经常用于显示计算机代码。字体中的每个字母都是等宽的。

    ·其他常用字体:Arial Black 、Arial Narrow、Impact

    3.字体类型:

    ·EOT:只适用于IE浏览器。

    ·.ttf或.otf:是计算机中最常用的字体格式。

    ·WOFF:是一种比较新的字体格式。

    ·SVG:并不是一种字体格式。

    4.使用字体:一旦下载好正确的字体文字,就可以使用了。首先将这些文件复制到你计算机中保存网站文件的目录下,然后在样式表中添加@font-face命令,告诉浏览器要去哪里下载这种字体,如:

    @font-face {

             font-family:”League Gohic”;

             src:url(‘fonts/League_Gothic-webfont.ttf’);

    }

    5.当在样式中应用字体时,假如为了使所有h1标签都使用League Gothic字体,可以像下面这样显示:

    h1 {

             font-family: ‘League Gothic’;

             font-weight: normal;

    }

    将font-weight设为normal是告诉浏览器只使用原版的League Gothic字体。

    假设你要在网站上使用League Gothic所有不同的字体格式,就可以像下面这样改写上述代码:

    @font-face{

             font-family:’League Gothic’;     //定义了字体的名称

             src: url(‘fonts/League_Gothic-webfont.eot’);    //针对IE9,但是仅当它处于兼容模式下才行。

             src: url(‘fonts/League_Gothic-webfont.eot?#iefix’)     //指定多个字体类型,?#iefix是为了兼容更多的IEbug,针对IE6~IE8。

    format(‘embedded-opentype’),     //表示字体格式,针对不同的字体格式将这个添加到每个URL的后面。

                url(‘fonts/League_Gothic-webfont.woff’)  format(‘woff’),

                url(‘fonts/League_Gothic-webfont.ttf’)  format(‘truetype’),

                      url(‘fonts/League_Gothic-webfont.svg’)  format(‘svg’);

    }

    chrome会下载能够理解的第一个字体文件,因此字体文件排序很重要,一般woff字体放在首选,因为它文件小,下载快。

    6.添加粗体斜体简便的方法:

    ·在@font-face指令中添加font-weight和font-style属性。

    需要用4个@font-face指令来涵盖粗体、斜体及正常文本的所有变体。

    例如:不使用粗体和斜体的样式为:

    @font-face {

             font-family:‘PTSans’;

             src:url(‘PTSansRegular.eot’);

             src:url(‘PTSansRegular.eot?#iefix’) 

    format(‘embedded-opentype’),

                 url(‘PTSansRegular.woff’)  format(‘woff’),

                      url(‘PTSansRegular.ttf’)  format(‘truetype’),

                      url(‘PTSansRegular.svg’)  format(‘svg’),

    font-weight:normal;

    font-style:normal;

    }

    使用该字体的斜体版本为:

    @font-face {

             font-family:‘PTSans’;

             src:url(‘PTSansItalic.eot’);

             src:url(‘PTSansItalic.eot?#iefix’) 

    format(‘embedded-opentype’),

                 url(‘PTSansItalic.woff’)  format(‘woff’),

                      url(‘PTSansItalic.ttf’)  format(‘truetype’),

                      url(‘PTSansItalic.svg’)  format(‘svg’),

    font-weight:normal;

    font-style:italic;

    }

    使用该字体的粗体版本为:

    @font-face {

             font-family:‘PTSans’;

             src:url(‘PTSansBold.eot’);

             src:url(‘PTSansBold.eot?#iefix’) 

    format(‘embedded-opentype’),

                 url(‘PTSansBold.woff’)  format(‘woff’),

                      url(‘PTSansBold.ttf’)  format(‘truetype’),

                      url(‘PTSansBold.svg’)  format(‘svg’),

    font-weight:bold;

    font-style:normal;

    }

    使用该字体的粗体以及斜体版本为:

    @font-face {

             font-family:‘PTSans’;

             src:url(‘PTSansBoldItalic.eot’);

             src:url(‘PTSansBoldItalic.eot?#iefix’) 

    format(‘embedded-opentype’),

                 url(‘PTSansBoldItalic.woff’)  format(‘woff’),

                      url(‘PTSansBoldItalic.ttf’)  format(‘truetype’),

                      url(‘PTSansBoldItalic.svg’)  format(‘svg’),

    font-weight:bold;

    font-style:italic;

    }

    7.添加粗体斜体并支持IE8:每种变体的名称都要唯一。

    例如:不使用粗体、斜体为:

    @font-face {

             font-family:‘PTSans’;

             src:url(‘PTSansRegular.eot’);

             src:url(‘PTSansRegular.eot?#iefix’) 

    format(‘embedded-opentype’),

                 url(‘PTSansRegular.woff’)  format(‘woff’),

                      url(‘PTSansRegular.ttf’)  format(‘truetype’),

                      url(‘PTSansRegular.svg’)  format(‘svg’),

    font-weight:normal;

    font-style:normal;

    }

    使用该字体的斜体版本为:

    @font-face {

             font-family:‘PTSansItalic’;

             src:url(‘PTSansItalic.eot’);

             src:url(‘PTSansItalic.eot?#iefix’) 

    format(‘embedded-opentype’),

                 url(‘PTSansItalic.woff’)  format(‘woff’),

                      url(‘PTSansItalic.ttf’)  format(‘truetype’),

                      url(‘PTSansItalic.svg’)  format(‘svg’),

    font-weight:normal;

    font-style:italic;

    }

    使用该字体的粗体版本为:

    @font-face {

             font-family:‘PTSansBold’;

             src:url(‘PTSansBold.eot’);

             src:url(‘PTSansBold.eot?#iefix’) 

    format(‘embedded-opentype’),

                 url(‘PTSansBold.woff’)  format(‘woff’),

                      url(‘PTSansBold.ttf’)  format(‘truetype’),

                      url(‘PTSansBold.svg’)  format(‘svg’),

    font-weight:bold;

    font-style:normal;

    }

    使用该字体的粗体以及斜体版本为:

    @font-face {

             font-family:‘PTSansBoldItalic’;

             src:url(‘PTSansBoldItalic.eot’);

             src:url(‘PTSansBoldItalic.eot?#iefix’) 

    format(‘embedded-opentype’),

                 url(‘PTSansBoldItalic.woff’)  format(‘woff’),

                      url(‘PTSansBoldItalic.ttf’)  format(‘truetype’),

                      url(‘PTSansBoldItalic.svg’)  format(‘svg’),

    font-weight:bold;

    font-style:italic;

    }

    8.颜色表示:

    (1)十六进制表示颜色。格式: #ffffff   #后面跟着六个0~f数值。

    (2)RGB表示颜色值。这种颜色值由3个数组成,每个数各代表一种色调(红、绿、蓝),它们均用百分比(0%~100%),或者0~255之间的数字表示。例如,将文本的颜色设置为白色:

    color:rgb(100%,100%,100%);

    或者

    color:rgb(255,255,255);

    (3)RGBA:RGBA表示Red、Green、Blue、Alpha。

    例如:color:rgba(255,100,5,.5);

    9.格式化词语和字母:

    (1)大写化:text-transform:uppercase;

    (2)小写化:text-transform:lowercase;

    (3)首字母大写:text-transform:capitalize;

    (4)小型大写字母:text-transform:small-caps;

    10.文本的修饰:

    (1)下划线:text-transform:underline;

    (2)上划线:text-transform:overline;

    (3)中间线:line-through。

    (4)可以合并多个属性来修饰文本,例如给文本添加上划线和下划线:text-transform:underline  overline。

    11.字母间距和字词间距:

    (1)字母间距:letter-spacing;正值增加字母间距,负值减少字母间距。

    (2)字词间距:word-spacing;

    12.给文本添加阴影:

    text-shadow属性需要四个方面的信息:水平偏移量、垂直偏移量、阴影的模糊度、阴影的颜色。也可以添加多个阴影创建复杂的效果,多个阴影之间用逗号隔开。这个效果只在IE10以上有效果。

    13.格式化整个段落:

    (1)调整行间距:line-height;

    (2)对其文本:text-align;

    (3)首行缩进:text-indent;

    (4)控制段落之间的距离:margin-top&margin-bottom;例如,消除段落之间的间隙:

    P{

             margin-top:0;

             margin-bottom:0;

    }

    14.给列表定义样式:

    (1)给项目符号和项目序号定位:list-style-position:outside、inside。padding-left可以调整项目符号和文本之间的距离,使用该属性时只有在list-style-positon属性值为outside或者没有使用list-style-position时才有效。

    (2)图形项目符号:list-style-image:url(相对于样式表的图片路径);background-image属性可以定位图片。

  • 相关阅读:
    算法学习——虚树
    【BZOJ】【1385】【Baltic2000】Division expression
    【BZOJ】【3503】【CQOI2014】和谐矩阵
    [杂谈]把大象放进冰箱里!
    【BZOJ】【1923】【Sdoi2010】外星千足虫
    【BZOJ】【1770】【Usaco2009 Nov】lights 灯
    【POJ】【1704】Georgia and Bob
    【BZOJ】【2200】【USACO 2011 Jan】道路和航线
    【BZOJ】【3052】【WC2013】糖果公园
    【BZOJ】【3757】苹果树
  • 原文地址:https://www.cnblogs.com/koto/p/5059997.html
Copyright © 2011-2022 走看看