• CSS 3学习——文本效果和@font-face


    文本效果

    关于文本效果,这里仅仅记录得到大多数浏览器支持的几个属性,分别是:

    text-overflow

    text-shadow

    word-break

    word-wrap

    text-overflow

    介绍text-overflow之前先介绍一个white-space属性。

    white-space属性用来描述如何处理元素中的空白符,可以从父元素继承值。

    可取值:

    normal  默认值。连续地空白符会被合并,包括换行符。文本填充行盒时,会根据需要自动换行。

    nowrap  连续的空白符(包括换行符)会被合并,但文本不会自动换行。文本会在同一行上填充,直到遇到<br>元素。

    pre  连续的空白符会被保留,在遇到换行符或者<br>元素时才会换行。

    pre-wrap  连续的空白符会被保留,文本会根据需要自动换行。

    pre-line  连续的空白符会被合并(不包含换行符),文本会根据需要自动换行。

    inherit  从父元素继承值。

    下面的表格总结了各种 white-sapce 值的行为:

     换行符空格和制表符文字转行
    normal 合并 合并 转行
    nowrap 合并 合并 不转行
    pre 保留 保留 不转行
    pre-wrap 保留 保留 转行
    pre-line 保留 合并 转行

    要看到text-overflow的效果,就要使文本不能换行。

    text-overflow的可取值:

    clip  默认值。文本溢出时,修剪溢出的部分(剪掉)。

    ellipsis  显示省略号来代替被修剪的文本。

    string  使用给定的字符串来代表被修剪的文本。(该值还没有得到浏览器的支持) 

    text-shadow

    text-shadow用于向文本添加一个或多个阴影,原理与边框的阴影相同。

    该属性是逗号分隔的阴影列表,每个阴影有两个或三个长度值和一个可选的颜色值。省略的长度值为0。

    语法:

    text-overflow:x-shadow y-shadow blur color;

    x-shadow  指定阴影相对于文字的水平偏移量。若是负值,则阴影位于文字的左边。

    y-shadow  指定阴影相对于文字的垂直偏移量。若是负值,则阴影位于文字的上边。

    blur  可选,<length>值,默认为 0。指定阴影的模糊距离,值越大,模糊半径越大,阴影也越大越淡。

    color  可选,指定阴影的颜色。

    word-break

    该属性指定一个单词如何换行。

    通过这个属性可以让浏览器实现任意位置的换行。

    可取值:

    normal   默认值。使用浏览器默认的换行规则。

    break-all  允许在单词内换行。

    keep-all   只能在半角空格或连字符处换行。

    word-wrap

    现在该属性已经被重命名为overflow-wrap。是用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行。

    可取值:

    normal  表示在正常的单词结束处换行。

    break-word  表示如果行内没有多余的地方容纳该单词到结尾,则哪些正常的不能被被分割的单词会被强制分割换行。

    @font-face

    在CSS 3中,开发者可以通过@font-face来自定义字体。

    语法:
    @font-face {

         font-family:  YourFontName;

         src: [url() || local() ]+  || format(str)?;

         sRules;

    }

    通过font-family可以给自定义字体命名任意自己喜欢的名字,要用引号包裹。

    通过 src 可以加载存放在服务器上的字体文件(受同源策略限制),也可以使用本地字体。使用本地字体时,用 local() 函数引用(字体名字不加引号)。在加载服务器上的字体文件时,可以用format()函数指定字体文件相应的文件类型。

    得到支持的字体文件的类型有以下几种:

    StringFont FormatCommon extensions
    "woff" WOFF (Web Open Font Format) .woff
    "truetype" TrueType .ttf
    "opentype" OpenType .ttf, .otf
    "embedded-opentype" Embedded OpenType .eot
    "svg" SVG Font .svg, .svgz

    传入format()函数的参数为上表中第一列中的一个(根据具体引用字体文件的后缀确定)。

    不同浏览器对以上几种字体文件的支持情况不同,具体可以看这篇文章

    sRules 是具体的字体样式,相关属性如下:

    font-variant  

    font-stretch

    font-weight

    font-style

    unicode-range

    font-variant

    可取值

    normal  默认值。正常字体。

    small-caps  字体为小型大写字母。

    以上两个值在CSS 1 中定义,CSS 3 中新加的值还没有得到浏览器支持。

    font-stretch

    查资料,这个属性只有IE和Firefox支持,但没有效果。

    unicode-range

    该属性的作用是告知浏览器,通过@font-face引入的字体覆盖了Unicode字符体系的哪些部分,以便浏览器仅在该范围内的字符使用该字体,使用时要把限定了字符范围的自定义字体名字放在对应元素font-family的第一个的位置上。具体看参考资料中的第5条。

    参考资料

    1、W3school

    2、MDN

    3、官方规范

    4、CSS3 @font-face

    5、妙用UNICODE-RANGE实现字体混搭

  • 相关阅读:
    [LC] 131. Palindrome Partitioning
    [LC] 216. Combination Sum III
    [LC] 90. Subsets II
    [Algo] 73. Combinations Of Coins
    [Algo] 66. All Valid Permutations Of Parentheses I
    Hive 和 HBase区别
    form表单 多种提交方式 [转]
    HDFS 好的文章链接
    js 获取字符串的 像素 宽度 ----字符串格式化输出
    python 本地变量和全局变量 locals() globals() global nonlocal 闭包 以及和 scala 闭包的区别
  • 原文地址:https://www.cnblogs.com/fogwind/p/6158389.html
Copyright © 2020-2023  润新知