• css3文字与字体的相关样式


    给文字添加阴影——text-shadow属性

      text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length color; 其中前三个length表示阴影离开文字的横方向距离,纵方向距离,和阴影的模糊半径,阴影的颜色。
    前两个参数为阴影离开文字的距离可以为负值,负值代表向上,向左移动。颜色的参数不能省略,省略该参数则不会绘制阴影。
    指定多个阴影,并且对多个,阴影可以使用不同的颜色,指定多个阴影时使用逗号将多个阴影隔开,但目前只有Firefox,chrome,opera支持。

    [id=one]{ text-shadow:-5px -5px 2px #066; color:#0C6; font-size:50px;}
    [id=two]{ text-shadow:-5px -5px 2px #066,75px 15px 2px #0FF,40px 40px 1px #C39; color:#0C6; font-size:50px;}
    View Code

               

    让文本自动换行——word-break属性
    浏览器有让文字自动换行的功能,对于西方文字来说,浏览器会在半角空格或者连字符的地方自动换行,而不会再单词中间换行。
    对于中文会在任意中文后换行。对于有标点符号的文章,浏览器不会让标点符号作为一行行首,因此会对标点前一个文字开始换行。
    word-break属性的属性值有normal:使用浏览器默认的换行规则,keep-all:只能在半角空格内或连字符处换行, break-all:允许在单词内部换行。

    [id=three]{ 300px; height:300px; background-color:#0FF; color:#000; margin-top:70px; word-wrap:break-word;}
    View Code

    让长单词与URL地址自动换行——word-wrap属性
    在css3中使用word-wrap来实现长单词与URL地址的自动换行。不自动换行可能会使长单词发生溢出。word-wrap:break-word;目前word-wrap属性得到所有的浏览器的支持

    使用浏览器端字体——web Font与@font-face属性
    在css3中,新增了web-Fonts功能,使用这个功能能使用服务器端字体,只要服务器安装此字体,网页就能正常浏览。
    在css3 中可以使用@font-face来利用服务器端属性
    @font-face{ font-family:webFont; src:url(服务器端字体的字体文件所在路径)format(声明字体文间的格式)}
    @font-face也能显示客户端字体
    @font-face的属性值有font-style,font-variant,font-weight,font-strech,font-size,src。

    修改字体种类而保持字体大小不变的——font-size-adjust属性
    font-size-adjust:aspect值;每一个字体的aspect的值不同。

    使用rem单位来定义字体的大小
    rem字体尺寸单位将根据页面的根元素(一般指html元素)的字体大小来计算实际字体的大小。无论子元素的父元素的大小是多大。
    多了解一下rem的使用方法,响应式布局。

  • 相关阅读:
    linux基础学习-14.3-第四关考试题
    linux基础学习-14.2-命令补充(4)
    linux基础学习-14.1-定时任务练习题
    引入jason依赖
    模糊查询sql语句
    多行删除操作
    分页助手依赖引入
    在web.xml文件中读取spring-security.xml配置文件
    spring-security框架引入依赖
    安全框架配置文件(spring-security.xml)
  • 原文地址:https://www.cnblogs.com/cyjy/p/6336817.html
Copyright © 2020-2023  润新知