字体的其他样式

2021-06-08 23:04:39 阅读：190 来源： 互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            .p1{
                color: red;
                font-size: 30px;
                font-family: "微软雅黑";
                /*
                 * font-style可以用来设置文字的斜体
                 *     - 可选值：
                 *         normal，默认值，文字正常显示
                 *         italic 文字会以斜体显示
                 *         oblique 文字会以倾斜的效果显示
                 *     - 大部分浏览器都不会对倾斜和斜体做区分，
                 *         也就是说我们设置italic和oblique它们的效果往往是一样的
                 *  - 一般我们只会使用italic
                 */
                font-style: italic;
                
                /*
                 * font-weight可以用来设置文本的加粗效果：
                 *         可选值：
                 *             normal，默认值，文字正常显示
                 *             bold，文字加粗显示
                 * 
                 *     该样式也可以指定100-900之间的9个值，
                 *         但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果
                 *         也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的
                 */
                font-weight: bold;
                
                /*
                 * font-variant可以用来设置小型大写字母
                 *         可选值：
                 *             normal，默认值，文字正常显示
                 *             small-caps 文本以小型大写字母显示
                 * 
                 * 小型大写字母：
                 *         将所有的字母都以大写形式显示，但是小写字母的大写，
                 *             要比大写字母的大小小一些。
                 */
                font-variant: small-caps ;
            }
            
            .p2{
                /*设置一个文字大小*/
                font-size: 50px;
                /*设置一个字体*/
                font-family: 华文彩云;
                /*设置文字斜体*/
                font-style: italic;
                /*设置文字的加粗*/
                font-weight: bold;
                /*设置一个小型大写字母*/
                font-variant: small-caps;
            }
            
            .p3{
                /*
                 * 在CSS中还为我们提供了一个样式叫font，
                 *     使用该样式可以同时设置字体相关的所有样式,
                 *     可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
                 * 
                 * 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，
                 *     如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式
                 *     大小必须是倒数第二个样式
                 * 
                 * 实际上使用简写属性也会有一个比较好的性能
                 */
                font: small-caps bold italic 60px "微软雅黑";
            }
            
            
        </style>
    </head>
    <body>
        
        <p class="p3">我是一段文字，ABCDEFGabcdefg</p>
        
        <p class="p1">我是一段文字，ABCDEFGabcdefg</p>
        
        <p class="p2">我是一段文字，ABCDEFGabcdefg</p>
    </body>
</html>

标签：文字,其他,样式,字体,设置,italic,font
来源： https://www.cnblogs.com/juham/p/14864871.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

字体的其他样式