• 技术文章 >web前端 >css教程

    css里的font文字怎么设置

    php中世界最好的语言php中世界最好的语言2017-12-01 14:56:28原创3212
    说到font属性大家想到的一定是文字,那么这篇文章就带大家好好的认识一下CSS对于文字的设置,或者说对于文字样式设置的学习。

    CSS可以设置文字的样式css font有哪些

    font文字目录

    CSS 文字的大小

    文字的颜色

    DIV CSS文字的下划线

    DIV CSS文字的间隔

    CSS 文字的字体

    文字的上下行间距

    CSS 字体样式(斜体)

    CSS 字加粗方式

    DIV+CSS英文字、字母大小写

    DIV+Css开发中设置字体常用css属性单词英文css font-可进入CSS手册查看更详细CSS 文字知识
    font、font-family(字体)、font-size(字大小)、font-style(字样式)、font-weight(css加粗)、text-decoration(下划线)、font-variant(字母大小写)、text-transform(英文大小写)、letter-spacing(间隔)

    接下来,我们一一实例讲解通过css文字控制方法

    一、字体大小使用到font-size

    首先设置了font-size的值为36px,则下面结果显示字体比较大。

    二、文字的颜色

    文字颜色使用css color颜色属性通过color更样式值设置文字样式的颜色为红色

    三、Css来控制文字的下划线方法css font,用到text-decoration

    text-decoration可以进css手册了解对应值,你还可能还希望了解css链接,css超链接样式、css下划线


    四、文字的间隔-进入详细的CSS 字间距了解

    五、文字的字体-用到css样式属性font-family

    一般font-family字体可以跟常见的“宋体”,“新宋体”,“黑体”,注意的是不能自己设置不参加的字体样式,虽然在自己电脑上可能自己设置字体能表现出了,但是一般电脑用户都没有添加字体的,所以在这里字体只能设置常见,系统自带的字体,而不能设置自己安装的字体,中文字体转Unicode编码。
    电脑自带字体,和常设置文字字体有黑体、新宋体、宋体、Arial, Helvetica, sans-serif等

    六、文字的上下行间距

    上下行距使用到css文字设置单词line-height,这里设置line-height:50px;


    可以看到演示css font文字段“我是被css控制文字样式演示。”离上下文字间隔距离是通过css line-height来实现。也许你需要了解br和p的区别。

    七、字体样式(斜体)

    文字斜体使用到css样式中font-style标签设置如font-style: italic,当然可以使用<em>标签将文字变为斜体


    八、字加粗方式

    文字加粗可以直接对需要加粗文字前加<b>文字后加</b>或<strong></strong>来实现,对文字的加粗,这里你可以用css来控制对文字加粗。这里用到font-weight来设置如font-weight:bold;


    这里font-weight的值可以为100-900不等的方式为值,值越大字体越粗,如果值为bold则为正常加粗,同使用b或strong一致效果,b与strong加粗区别。

    九、英文字、字母大小写css font

    使用css中font-variant字母全大小,如font-variant:small-caps;,选择性大小写text-transform如text-transform:capitalize;开头首字母大写。


    text-transform语法text-transform : none | capitalize | uppercase | lowercase
    参数:
    none :  无转换发生
    capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生
    uppercase :  转换成大写
    lowercase :  转换成小写

    font-variant语法font-variant : normal | small-caps

    参数:

    normal : 正常的字体
    small-caps : 小型的大写字母字体


    相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    相关阅读:

    Css3中的transform 渐变属性怎么使用

    css中常见的单位的总结

    如何用CSS3属性选择器替代JS的作用

    以上就是css里的font文字怎么设置的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:font css 样式表
    上一篇:CSS父级子级怎么使用 下一篇:在HTML的网页布局里div与span有什么区别
    20期PHP线上班

    相关文章推荐

    精选22门好课,价值3725元,开通VIP免费学习!• 巧用CSS3滤镜制作文字快闪切换动画效果!• 深入了解content-visibility属性,聊聊怎么用它优化渲染性能• 聊聊怎么巧用CSS给普通黑色二维码添上彩色渐变!• 巧用CSS实现各种奇形怪状按钮(附代码)• 聊聊CSS3中的4个逻辑选择器(快速入手)
    1/1

    PHP中文网