zoukankan      html  css  js  c++  java
  • css文字与文本相关样式

    css文字属性定义文本的字体系列,大小,加粗,风格和变形
     
    font-family          设置字体系列
    font-size          设置字体的尺寸
    font-style          设置字体的风格
    font-variant          以小型大写字体或正常字体显示文本
    font-weight          设置字体的粗细
     
    css3文字相关样式
    1.给文字添加阴影
     
    <!--text-shadow:length length length color-->
    <!--阴影离开文字横向方向的距离
    阴影离开文字纵向方向的距离
    模糊程度
    阴影颜色
    -->
    <style>
         div{
              text-shadow:5px 5px 5px red;
              /**可以添加多个阴影**/
              text-shadow:-5px -5px 10px #ff00ff,5px 5px 5px #ff00ff,10px 10px 2px #ff00ff;
              color:black;
              font-size:40px;
              fon-weight:bold;
         }
    </style>
    <div>hello world!</div>
     
    2.使用服务器端字体
    当客户端没有我们想要的字体样式时,依然可以使用服务器端字体,显示我们想要的字体效果
    字体换行设置
    word-break : normal , keep-all , break-all; 
    (使用浏览器默认的换行规则,允许在单词内换行,只能在半角空格或连字符处换行)
     
     
    <style>
         @font-face{
              font-family:webfont;
              /*ttf :truetype  otf:opentype*/
              src:url('DdjaVuSansMono-BoldOblique.ttf')format("truetype");
              font-weight:normal;
         }
         div{
              font-family:webfont;
         }
    </style>
    <div>使用服务器端字体</div>
    客户端有某个字体时,引用情况如下
     
    <style>
         @font-face{
              font-family:Arial;
              src:local("Arial"),     /*引用本地的字体*/
                   url("NotoSansCJKsc-Thin.otf");
         }
    </style>
    <div>引用本地字体测试</div>
     
    3.修改文字种类而保持字体尺寸不变
    font-size-adjust : aspect值;
    x-height : 58    font-size:100px   aspect : 0.58
     
    <style>
         #div1{
              font-family:MenLo;
              font-size:16px;
              font-size-adjust:0.60;
         }
         #div2{
              font-family:cursive;
              font-size:16px;
              font-size-adjust:0.57;
         }
         #div3{
              font-family:"Lantinghei SC";
              font-size:16px;
              font-size-adjust:0.60;
         }
    </style>
    <body>
         <div id="div1">Text sample</div>
         <div id="div2">Text sample</div>
         <div id="div3">Text sample</div>     
    </body>
     
     
     
     
     
     
    css文本属性可定义文本外观,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
     
    color          文本颜色
    direction          文本方向
    line-height          行高
    letter-spacing          字符间距
    text-align          对齐元素中的文本
    text-decoration          向文本添加修饰
    text-indent          缩进元素中文本的首行
    text-transform          元素中的字母
    none:     无转换
    capitalize:     将每个单词的第一个字母转换成大写
    uppercase:     转换成大写
    lowercase:     转换成小写
    css3的新增属性:
    text-shadow:     向文本添加阴影
    word-wrap:     规定文本的换行规则
    normal:          允许内容顶开或溢出指定的容器边界
    break-word:     内容将在边界内换行,如果需要,单词内部允许断行。
    unicode-bidi          设置文本方向
    white-space          元素中空白的处理方式
    word-spacing          字间距
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    java虚拟机字节码执行引擎
    java7 invokedynamic命令深入研究
    [转载]使用expect实现shell自动交互
    elasticsearch 聚合时 类型转换错误
    ES的关键端口
    CentOS6.5安装ganglia3.6
    Linux远程执行echo问题
    [转载]CentOS修改用户最大进程数
    elasticsearch新加入节点不能识别问题
    ssh免密码登录的注意事项
  • 原文地址:https://www.cnblogs.com/baixuemin/p/6494843.html
Copyright © 2011-2022 走看看