CSS3-设置背景以及字体

作者: 相关函数 | 来源:发表于2017-11-22 11:04 被阅读50次

背景

background-origin

这个属性规定了背景图片的定位区域.背景图片可以放置于border-box,padding-box以及content-box;

背景图片的定位区域

background-clip

这个属性规定背景的绘制区域,有三个值,border-box(默认值,从边框区域向外裁剪背景),padding-box(从补白区域向外裁剪背景),content-box(从内容区域向外裁剪背景).

background-size

该属性规定背景图像的尺寸,可以设置其值为宽高为px或者百分比,或者使用cover设置其扩展至足够大,默认是以宽为标准以原图的宽高比例放大,图片可能不能完全的显示在背景定位区域中,contain是设置把图像扩展至足够尺寸,以使其宽高完全适应内容区域,保证整张图完整显示.

字体

在CSS3中可以使用@font-face规则来使用服务器上的字体,当需要用到改字体的时候会自动下载到计算机中.

在@font-face规则中,必须首先定义字体的名称,然后使用src(...)属性指定字体源文件的路径.如果需要引用该字体的时候,使用font-family来指向自定的名称.

使用粗体字的时候同样需要在@font-face规则中添加font-width属性其值为bold.实际上bold是另一种字体,所以依然需要在自定义的名称下面设置其src.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{
                font-family: MyFont;
            }
            @font-face {
                font-family:MyFont;
                src: url(fzsek.TTF);
            }
            @font-face {
                font-family:MyFont;
                src: url(FZLTH_GB18030_YS.ttf);
                font-weight: bold;
            }
            
        </style>
    </head>
    <body>

        <div><b>生命曾经闪耀思想的荣光</b>,我们不能,不能失去信仰.</div>
    </body>
</html>

相关文章

  • CSS3-设置背景以及字体

    背景 background-origin 这个属性规定了背景图片的定位区域.背景图片可以放置于border-box...

  • statusBar 背景以及字体颜色设置

    系统自带效果 1.UIStatusBarStyleDefault 效果是:黑色字体、透明背景 2.UIStatus...

  • Android studio 3.1 基础设置

    窗口字体设置 控制台字体设置 Logcat颜色设置 快速文档设置 代码字体设置 代码背景设置(护眼模式) 自动导包...

  • iOS控件之UILabel

    属性 设置内容 设置字体颜色 设置对齐方式 设置字体大小 背景颜色 换行模式 设置最小收缩比例 设置行数 设置文字...

  • xcode 中设置护眼模式

    设置Xcode 的背景色RGB为199,237,204 需要设置字体的话选中字体然后进行字体大小设置即可

  • swift UILabel用法详解

    创建 设置背景颜色 设置读取文本,默认为nil 设置字体颜色,默认为黑色 设置文字大小,默认17 设置字体居中 设...

  • OC-UITabBar上相关设置

    去掉黑线 自定义黑线颜色 设置背景色 自定义背景图片 设置字体偏移 字体 未选中颜色 选中颜色 注意:有点设置无限...

  • 设置字体颜色背景

    从前有座 山 //中间的山变成绿色

  • 设置EditText的hint字体大小

    背景: EditText能设置hint的颜色,但是却不能设置hint的字体大小,导致hint的字体和text的字体...

  • 编译器主题设置--VSCode

    VSCode 设置下字体,和fontSize commond + , 进入设置页面, 设置背景主题: common...

网友评论

    本文标题:CSS3-设置背景以及字体

    本文链接:https://www.haomeiwen.com/subject/jycnvxtx.html