首页 > web前端 > css教程 > 正文

css font控制字体的多种变换

青灯夜游
发布: 2021-01-02 09:31:00
转载
2266人浏览过

css font控制字体的多种变换

教程推荐:css视频教程

CSS字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体、宋体与微软雅黑这三款字体。

font-size控制字体大小,我们设置字体大小是设置它的宽度,它的高度一般电脑系统默认字体大小是16px,所以字体大小尽量不要低于16px,1em=16px;

font-weight: bold;/*控制字重 一般是100-900 常用lighter(细体) normal(正常)bold加粗 */

立即学习前端免费学习笔记(深入)”;

至于这个font-style,一般默认是normal,也就是正常的,如果说你设置 font-style: italic;斜体话,其实和这个的效果是差不多的;文字间的间距用的line-height如果和高度相等话,就是垂直居中了。

通常font字体的简写:font:style weight size/line-heigt font-family  /*要求必须出现的2个是 size与font-family*/

网趣购物系统加强升级版
网趣购物系统加强升级版

新版本程序更新主要体现在:完美整合BBS论坛程序,用户只须注册一个帐号,即可全站通用!采用目前流行的Flash滚动切换广告 变换形式多样,受人喜爱!在原有提供的5种在线支付基础上增加北京云网支付!对留言本重新进行编排,加入留言验证码,后台有留言审核开关对购物系统的前台进行了一处安全更新。在原有文字友情链接基础上,增加LOGO友情链接功能强大的6种在线支付方式可选,自由切换。对新闻列表进行了调整,

网趣购物系统加强升级版 0
查看详情 网趣购物系统加强升级版
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css常用样式font字体的多种变换</title>
    <style>
        div{
            font-family: 'Microsoft YaHei';/*微软雅黑*/
            /* font-family: 'Lucida Sans','Lucida Sans Regular', 
            'Lucida Grande', 'Lucida Sans Unicode', Geneva,
             Verdana, sans-serif; */
            /*字体加上双引号或者单引号,当有多个字体的时候,中间逗号分开*/
            color:#f90;
            font-size: 24px;/*控制字体大小*/
            font-weight: bold;
            /*控制字重 常用lighter(细体) normal(正常)bold加粗 */
            font-style: italic;/*等同于em*/
            line-height: 30px;
        }
        /*font字体的简写:font:style weight size/line-heigt font-family*/
        /*要求必须出现的2个是 size font-family*/
        p{  
            font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular',
             'Lucida Grande', 'Lucida Sans Unicode', 
             Geneva, Verdana, sans-serif;
            letter-spacing: 1px;/*英文字母间距*/
            word-spacing: 10px;/*英文单词间距*/
        }
        P::first-letter{
            text-transform: capitalize;
        }/*第一个字母::first-letter*/
        p::first-line{
            color:red;
        }/*第一行::first-line*/
    </style>
</head>
<body>
    <div>技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,
        欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好 </div>
    <p>Technology is king world, I want to ask if the scenery on 
    the top of Qingtian Mountain is the king of technology, 
        I want to ask whether the scenery of Qingtian Peak is 
        the king of technology. If the technology is the king of the world, 
        I would like to ask whether the scenery on the top of 
        Qingtian Mountain is the king of the world. Is the scenery good?</p>
</body>
</html>
登录后复制

关于样式继承问题/*与文字有关样式会被继承下去*/代码展示如下:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        p{
            font-size: 20px;
            font-family: 微软雅黑;    
            color:#f00;
            font-weight:bold;
            font-style:italic;
            word-spacing:15px;
        }

    </style>
</head>
<body>
    <div>
        <p><span>linux php linux</span></p>
        <p><span>linux linux php linux</span></p>
        <p><span>linux linux php linux</span></p>
        <p><span>linux linux php linux</span></p>
    </div>    
</body>
</html>
登录后复制

更多编程相关知识,请访问:编程教学!!

以上就是css font控制字体的多种变换的详细内容,更多请关注php中文网其它相关文章!

相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号