精华内容
下载资源
问答
  • CSS字体样式设置、CSS文本样式设置

    千次阅读 2019-10-22 18:23:54
    一、CSS字体样式设置 1.字体样式设置 字体样式大致有如下几种特征: 字体类型(风格)、字体粗细、字体大小、字体系列 (1)字体类型(风格) font-style 用于设置字体风格,可设置以下值: ① normal:普通字体 ② ...

    一、CSS字体样式设置

    1.字体样式设置

    字体样式大致有如下几种特征:
    字体类型(风格)、字体粗细、字体大小、字体系列
    (1)字体类型(风格) font-style
    用于设置字体风格,可设置以下值:
    ① normal:普通字体
    ② italic:斜体
    ③ oblique:倾斜字体

    (2)字体粗细 font-weight
    用于设置字体粗细,可设置以下值:
    ① normal:正常粗细
    ② bold:粗体
    ③ bolder:更粗的字体
    ④ lighter:更细的字体
    ⑤ 100~900:步长为100,
    400 等同于 normal,而 700 等同于 bold

    (3)字体大小 font-size
    用于设置字体大小的,可设置任意正整数和浮点数
    默认情况下,几乎所有的浏览器的默认字体大小都为16px. 且Chrome等主流浏览器不支持12像素以下的字体。

    (4)字体系列 font-family
    用于设置字体系列,就是我们通常说的“所用字体”。
    设置字体有以下规则:
    1.使用中文字体,或带空格的英文字体名,需要用“引号”将该字体名扩起来

    2.单个单词的字体名称则无需加上引号。

    3.“font-family”可以有多个值,多个值设置的作用是,当浏览用户本地计算机没有找到设置的第一个值所表示的字体时,会去找第二个,以此类推,若找到最后一个值都没有找到匹配的字体,浏览器则会用自己的默认字体。

    4.考虑到网页最终显示效果在不同设备上的一致性,我们通常使用的中文字体只有:“宋体”、“微软雅黑”、“黑体”、“楷体”、“幼圆”等,而目前以“微软雅黑”为最常用设计字体。

    5.常用的英文字体有:“Arial”、“Helvetica”、“Tahoma”、“Verdana”、“Lucida Grande”、“Times New Roman”、“Georgia”等。

    2.组合值写法
    (1)给上所有的属性
    我们能将“font”的多个值组合起来写,比如我们要设置一个
    风格为正常,粗体,20像素大小,“微软雅黑”

    风格为斜体,正常粗细,字号为22像素,“宋体”
    我们可以这样写:

    Css代码
    在这里插入图片描述
    (2)省略字体类型或字体风格之一,或都省略
    1.所以在写“font”属性组合值的时候可以省略二者之一,以辨识到的值进行设置,另外一个自动为“normal”,
    2.甚至还能省略掉第前两个值,只保留“font-size”和“font-family”
    即:style,weight可只给上任意一个,或者都给,或者都不给,顺序也可以换,但是要在前两个。
    如:

    CSS代码
    在这里插入图片描述

    注意:
    在“font”组合值的写法中,只有“font-size”和“font-family”这两个的值是不能省略的,而且是缺一不可,顺序也是要先大小后系列不能变,否则浏览器会不认识该值,对该组合值进行报错。
    (3)在font内设置文本行高
    “font”属性组合值的写法,除了以上所提到的,它还有一种比较不常见,却还比较实用的写法,即可直接在“font”属性内设置文本的行高“line-height”,如下:

    3.扩展:字体单位px ,em , rem【必须掌握】
    ① px(像素,相对于显示器屏幕分辨率而言)
    ② em(相对当前元素内文本的字体尺寸,会继承父元素大小)
    ③ rem (相对HTML根元素,最常用的单位)
    PX
    1.像素px是相对于显示器屏幕分辨率而言的。
    2.PX特点
    1. IE无法调整那些使用px作为单位的字体大小;
    2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
    3. Firefox能够调整px和em,rem。大部分中国网民使用IE浏览器(或内核)。
    3.当把一个图放大后,看到很多矩形的小方块,那些就是像素。

    EM
    4.em是相对长度单位。相对于当前标签内font-size的大小而言。
    5.如果当前标签字体尺寸未被人为设置,当前标签内font-size的大小会继承父标签的字体大小。
    【如果父标签也没设置大小,那么就会找到继承的顶点–>浏览器的默认16px字体大小。所以,默认情况16px==1em 】

    6.如果设置了就会以设置font-size大小为准。

    7.在主流浏览器中,字体的大小不能小于12px (宽高可以小于12px),如果字体大小小于12px,那么会强制变为12px.

    <div style="font-size: 10px;">你好啊</div>
    <div style="font-size: 12px;">你好啊</div>
    <div style="font-size: 14px;">你好啊</div>
    <div>你好啊</div>
    

    8.EM特点
    em的值并不是固定的;
    em会继承父级元素的字体大小。
    REM
    rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。
    9.rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

    这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
    10.rem单位兼容问题
    目前,除了IE8及更早版本外,所有浏览器均已支持rem。
    对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:
    p {font-size:14px; font-size:.875rem;}
    注意:
    选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
    11.px 与 rem 的选择?
    ① 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可
    ② 对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

    4.扩展:css3大小单位vw、vh、vmin、vmax【必须了解】
    ① 基本概念
    先明白一个名词:视窗

    视窗(Viewport)是你的浏览器实际显示内容的区域,即不包括工具栏和任务栏的网页可视区域大小。
    然后,vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,值为数字n,表示占据视窗大小的n%。
    ② 具体描述
    vw:视窗宽度的百分比(1vw 表示视窗宽度的 1%)
    vh:视窗高度的百分比 (1vh 表示视窗高度的 1%)
    vmin:当前 vw 和 vh 中较小的一个值
    vmax:当前 vw 和 vh 中较大的一个值
    ③ 代码示例

    
    
    Document

    /* 每个div的大小都为视高的20% /
    div {
    border: 1px solid red;
    height: 20vh;
    }
    /
    div为视宽的40%,字体大小为视宽的1% /
    .demo {
    width: 40vw;
    font-size: 1vw;
    background-color: #50688B;
    color: #FFF;
    }
    /
    div为视宽的50%,字体大小为视宽的2% /
    .demo1 {
    width: 50vw;
    font-size: 2vw;
    background-color: rgb(53, 108, 190);
    color: rgb(170, 111, 111);
    }
    /
    div为视宽的60%,字体大小为视宽的3% /
    .demo2 {
    width: 60vw;
    font-size: 3vw;
    background-color: #644bd3;
    color: rgb(54, 41, 41);
    }
    /
    div为视宽的70%,字体大小为视宽的4% */
    .demo3 {
    width: 70vw;
    font-size: 4vw;
    background-color: #ff006e;
    color: #FFF;
    }

    所有div的高度为20vw,即视宽的20%

    div为40vw即视宽的40%,字体大小为1vw即视宽的1%
    div为50vw即视宽的50%,字体大小为2vw即视宽的2%
    div为60vw即视宽的60%,字体大小为3vw即视宽的3%
    div为60vw即视宽的70%,字体大小为4vw即视宽的4%
    ```

    ④ vw、vh 与 % 百分比的区别
    (1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
    (2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。
    ⑤ vmin、vmax 用处
    做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。
    由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
    ⑥ 浏览器兼容性
    (1)桌面 PC
    Chrome:自 26 版起就完美支持(2013年2月)
    Firefox:自 19 版起就完美支持(2013年1月)
    Safari:自 6.1 版起就完美支持(2013年10月)
    Opera:自 15 版起就完美支持(2013年7月)
    IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)
    (2)移动设备
    Android:自 4.4 版起就完美支持(2013年12月)
    iOS:自 iOS8 版起就完美支持(2014年9月)
    5.扩展:复选框无法与旁边文字对齐的解决方式

    解决方式:
    给input设置vertical-align: -6px;
    .read input{
    vertical-align: -6px;
    }
    6.扩展:两个原本对齐的行内div,其中一个加了内容后就无法对齐的解决方式

    解决方式:

    方式一: 给div设置超出文本的内容就自动隐藏。
    方式二: 给div设置vertical-align: top; ( 有时候为top也可以 )

    五、CSS文本样式设置
    当许多文字组合到一起就形成了文本,现在我们研究的就是如何设置这些文本的样式。
    1.文本的颜色 “color”
    在目前的浏览器标准中,要想改变浏览器默认字体的颜色(#000000)唯一的途径就是通过CSS的“color”属性进行设置。颜色。
    color属性可以设置4种类型的值
    ① 颜色英文单词
    可以通过颜色的英文单词直接设置文本的颜色,如
    “red”、“”orange、“yellow”、“green”、“cyan”、“blue”、“purple”、“pink”、“gray”、“black”和“white”
    等等。
    ② HEX(三原色,16进制表示)
    通过“#”+16进制表示颜色,
    有“#”+“三位”和“#”+“六位”的形式。
    若是“三位”的形式,第一位表示“红”,第二位表示“绿”,第三位表示“蓝”,通过取值区间“0-9”,“a-f”(10-16)的组合,如“#26f”,共计能表达4,096个颜色。
    若是“六位”的形式,可以表示的颜色数更加细致,第一二为表示“红”,第三四位表示“绿”,第四五位表示“蓝”,同样也是通过取值区间“0-9”,“a-f”的组合,如“#2369fd”,共计能表达16,777,216【一千六百多万】个颜色。
    ③ RGBa(三原色,十进制表示)
    和“HEX”表示三原色一样,该模式同样也是采用三元色的值来表现色彩,不过“RGBa”颜色模式采用的是10进制的值,
    格式如“rgb(34, 102, 255)”,值之间用英文逗号“,”进行分割,第一个值表示“红”,第二个值表示“绿”,第三个值表示“蓝”,每个值的区间为“0-255”(256个色阶),同样能表示16,777,216【一千六百多万】个颜色。
    除此之外,该模式还支持对不透明度的设置,也就是“RGBa”里面的这个“a”(alpha),它表示不透明度,取值区间是“0到1”之间的浮点数(可保留到两位小数),
    “0”表示完全透明,“1”表示完全不透明,写法如“rgba(34, 102, 255, 0.55)”、“rgba(34, 102, 255, .9)”或“rgb(34, 102, 255)”。
    ④ HSLa(色调,饱和度,亮度,不透明度)
    该模式通过设置
    “色调”(Hue)、
    “饱和度”(Saturation)、
    “亮度”(Lightness)
    “不透明度”(Alpha)
    来表现色彩的,不透明度的表示和“RGBa”一样,我们主要来看下面三个值的意义:
    1)色调
    除开“黑色”和“白色”从纯红色过度到纯蓝色再过度到纯红色这一过程的颜色轴的区间,共计360个色调;
    2)饱和度
    从该色调的纯黑到该色调的纯色区间,越接近黑色,饱和度越低,越接近纯色,饱和度越高;
    3)亮度
    从“纯黑”到“纯白”这一过程的表示,越接近黑色亮度越低,越接近白色亮度越高。
    4)例子
    HSL(76, 35%, 45%) :这是一个色调为76,饱和度35%,亮度45%,不透明的颜色
    HSLa(316, 75%, 56%, 0.9):这是一个色调为316,饱和度75%,亮度56%,不透明度0.9的颜色
    ⑤ Transparent(透明)
    只要设置该值,那文本的内容将变为完全透明,即无论背景为什么颜色或图片,都会完全看不到设置的文字元素,只是起到了一个占位作用,除非文本被选中,如下例:
    div { color: transparent;}
    需要补充的是,“IE 8”浏览器及以下的版本不支持“RGBa”、“HSLa”模式及“Transparent”值,即不支持透明度部分的值,对常规“RGB”和“HSL”模式仍能正常支持。

    2.文本的居中方式“text-align”
    该属性用于控制“行内块元素”或“块元素”内“行内元素”(文本元素)的居中方式的,包含三个值:
    left(默认)
    文本左对齐
    center
    文本居中对齐
    right
    文本右对齐
    3.段落首行缩进“text-indent”
    该属性是用于设置 每个段落首行缩进数量值 的属性,
    如果是用于中文布局,一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。
    p {
    text-indent: 2em;
    }

    4.文本装饰线“text-decoration”
    该属性是为文本上添加一根装饰线,带"href"属性的标签默认会带有一根下划线,就是由该属性的值“underline”设置的。
    “text-decoration”属性有以下值:
    none(默认)
    不显示任何装饰线
    underline
    在文本下方显示装饰线
    overline
    在文本上方显示装饰线
    line-through
    在文本中间显示装饰线,相当于删除线
    p {
    text-decoration: none;
    }

    5.英文字母大小写转“text-transform”
    该属性能将“行内元素”中的英文文本进行大小写转换,以满足网站对规范性的要求。
    特别在一些对项目产品细节要求至严的跨国企业或合资企业,
    他们对网站或应用中的文本格式也有相当高的要求。
    当网站中的绝大部分英文文本都是由其它地方整理粘贴而来的时候,如果要逐一去修改这些文本,不仅时间成本大大地增加,也容易出现一些难以一时发现的疏漏,这个时候“text-transform”属性就有它的“用武之地”了。
    该属性有以下属性值:
    none(默认)
    保持文本中英文单词的默认大小写
    capitalize
    将每个英文单词首字母变为大写字母(而不管他原本是大写还是小写),其它字母即便是小写也不管。
    uppercase
    将所有英文单词转换为大写字母
    lowercase
    将所有英文单词转换为小写字母
    p {
    text-transform: capitalize;
    }

    6.文本的阴影“text-shadow”
    该属性的作用是给文本添加阴影效果。
    该属性最初是在CSS2.0中被定义的,但在CSS 2.1被删除了,不知道是出于什么考虑,在CSS3.0中又重新被写进了规范。
    目前除了IE9及之前版本不支持该属性外,其它主流浏览器钧支持该属性。
    p {
    text-shadow: 0px 0px 2px black;
    }

    该属性有4个值,具体如下:
    水平方向阴影偏移(h-shadow)
    “0”表示维持原位,正数为向右偏移,负数为向左偏移。单位为像素“px”。
    垂直方向阴影偏移(v-shadow)
    “0”表示维持原位,正数为向上偏移,负数为向下偏移。单位为像素“px”。
    阴影模糊距离(blur)
    用正数表示阴影模糊的单位距离,距离越大模糊程度越高,单位为像素“px”。
    阴影的颜色(color)
    支持Web技术中的常用颜色模式:“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
    和“行内块元素”和“块元素”所用的“box-shadow”(以后会学习)有所不同,文本阴影的属性值里没有“inset”(设置为内阴影)和“spread”(阴影的扩展,单位像素“px”),以后在使用中需要加以区分。

    7.段落文本行高“line-height”
    该属性是用于设置“行内元素”中文本元素在一行中所占据的高度,(可实现单行文本垂直居中的效果)
    使用场景如:表格、导航按钮、自定义样式按钮、标题栏等。
    值 描述
    normal 默认。他会自动设置一个合理的行间距。
    number 设置数字,表示字体尺寸的倍数。
    length 设置固定的行间距。
    % 基于当前字体尺寸的百分比行间距。默认为100%
    inherit 规定应该从父元素继承 line-height 属性的值。

    8.单词的间距“word-spacing”
    该属性用于设置英文单词之间的间距。
    注意
    他区分单词时是按照单词两边是否含有空格来判断的,所有如果你的内容是中文,
    1.当你的文字间没有空格时,整体就会被当做一个单词。
    2.当你的每个汉字两边都有空格时,每个汉字才会被当做是一个单词。
    3.其值可以为负数,距离会减小

    p {
    word-spacing: 1em;
    }

    9.字符的间距“letter-spacing”
    和“word-spacing”有所不同,该属性是用于控制字符间的间距。
    一个字母,一个汉字,甚至一个空格都是一个字符。
    注意:
    1.在html中,多个空格最终会变为一个空格的。
    2.其值可以为负数,距离会减小

    10.空格换行处理“white-space”
    该属性设置如何处理元素内的空格符和换行符,它主要有以下值:
    normal(默认)
    由浏览器处理空格和换行
    pre
    段落里所有的空格符和换行符都会被保留(类似于

    标签)
    nowrap
    段落内的文本不会换行(类似于没有设置过换行的“notepad”)
    pre-wrap
    段落里所有的空格符序列和换行符序列都会被保留,这点类似于pre
    但是他不会去更改浏览器的默认行为(当内容的宽度小于了窗体的宽度时会出现滚动条的行为)
    pre-line
    保留换行符,但是多个空格还是会按照浏览器的默认行为处理(多个合并为一个)

    注意:
    如果你当前的内容是无空格分隔的一连串的英文,那么他会被浏览器当作是一个单词,不会让他换行,只会出现水平滚动条去适应他。
    11.设置文本方向“direction”
    该属性是由于控制文本显示方向的,即从左往右,或从右向左。
    在有些国家,如:“阿拉伯”、“伊朗”、“以色列”,还有古典的“中日韩”文等等,他们的文字显示方向都是从右向左的,为了适应这些文字方向的需求,如果用手工去设置,耗费的时间成本会过高,也非常容易出错,这个时候“direction”属性会帮你克服这个问题。该属性有两个值:
    ltr
    默认值,文本方向从左到右
    rtl
    文本方向从右向左

    展开全文
  • 设置文本字体样式

    2018-01-25 11:54:18
    有些人对文本字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个内容。本文将详细介绍文本相关样式   首行缩进 定义  首行缩进是将段落的第一行缩进,这是常用的文本格式化...

    前面的话

      CSS文本样式是相对于内容进行的样式修饰。由于在层叠关系中,内容要高于背景。所以文本样式相对而言更加重要。有些人对文本和字体样式之间的不同不太了解,简单地讲,文本是内容,而字体则用于显示这个内容。本文将详细介绍文本相关样式

     

    首行缩进

    定义

      首行缩进是将段落的第一行缩进,这是常用的文本格式化效果。一般地,中文写作时开头空两格,类似于此

      [注意]该属性可以为负值

    text-indent

      值: <length> | <percentage> | inherit

      初始值: 0

      应用于: 块级元素(包括block和inline-block)

      继承性: 有

      百分数: 相对于包含块的宽度

    应用

    【悬挂缩进】

    复制代码
    div{
        width: 200px;
        border: 1px solid black;
        text-indent: -1em;//关键代码
        padding-left: 1em;//关键代码
    }
    
    复制代码

     【首字下沉】

    复制代码
    div{
        width: 200px;
        border: 1px solid black;
        text-indent: 0.5em;
    }
    div:first-letter{
        font-size: 30px;
        float: left;
    }  
    复制代码

    水平对齐

    定义

      水平对齐是影响一个元素中的文本的水平对齐方式

    text-align

      值: left | center | right | justify | inherit

      初始值: left

      应用于: 块级元素(包括block和inline-block)

      继承性: 有

    两端对齐

      当水平对齐方式为两端对齐时,word-spacing可能会调整,以便文本在整行中正好放下。如果为letter-spacing指定一个长度值,则letter-spacing不会两端对齐影响,除非letter-spacing值为normal

    IE兼容

      对于IE7-浏览器来说,使用text-align不仅会改变文本的水平对齐方式,也会改变后代块级元素的水平对齐方式

    复制代码
    .box{
        width: 200px;
        height: 200px;
        background-color: pink;
        border: 1px solid black;
        text-align: right;
    }    
    .in{
        height: 100px;
        width: 100px;
        background-color: lightgreen;
    }
    复制代码
    <div class="box">
        <div class="in">测试文字</div>
    </div>

    字间隔

      字间隔是指单词间距,用来设置文字或单词之间的间距。实际上,"字"表示的是任何非空白符字符组成的串,并由某种空白符包围

      [注意]单词之间用空格分开,单词之间的间距 = word-spacing + 空格大小

      [注意]字间隔可为负值

    word-spacing

      值: <length> | normal | inherit

      初始值: normal(默认为0)

      应用于: 所有元素

      继承性: 有

    字母间隔

      字母间隔是指字符间距

      [注意]字母间隔可为负值

    letter-spacing

      值: <length> | normal | inherit

      初始值: normal(默认为0)

      应用于: 所有元素

      继承性: 有

    文本转换

      文本转换用于处理英文的大小写转换

    text-transform

      值: uppercase(全大写) | lowercase(全小写) | capitalize(首字母大写) | none | inherit

      初始值: none

      应用于: 所有元素

      继承性: 有

    文本修饰

    定义

      文本修饰用于为文本提供修饰线

      [注意]文本修饰线的颜色与文本颜色相同

    text-decoration

      值: none | [underline(下划线) || overline(上划线) || line-through(中划线)] | inherit

      初始值: none

      应用于: 所有元素

      继承性: 无

    继承

      文本修饰属性无法继承,意味着子元素文本上的任何修饰线与父元素的颜色相同。子元素文本上的修饰线实际上是父元素的,只是正好"经过"而已。

      [注意]互不冲突的文本修饰线可出现多条

    最后

      在首行缩进(text-index)、水平对齐(text-align)、字间隔(word-spacing)、字母间隔(letter-spacing)、文本转换(text-transform)、文本修饰(text-decoration)这6种文本样式中,首行缩进(text-index)和水平对齐(text-align)只能够应用于块级元素(包括block和inline-block),这是最应该注意的地方

    好的代码像粥一样,都是用时间熬出来的



    应用基本的文本样式

    文本对齐方式:text-align

    该属性用于控制“行内块元素”或“块元素”内“行内元素”(文本元素)的居中方式的,包含三个值:

    • left:居左对齐;

    • center:居中对齐;

    • right:居右对齐;

    空白处理:white-space

    空白在HTML文档中通常是被压缩或者直接忽略掉。这允许你将HTML文档的布局跟页面的外观分离。

    <!DOCTYPE html>
    <html lang="zh-cn">
    
    <head>
        <meta charset="UTF-8">
        <title>Example</title>
        <style type="text/css">
    
            p {
                width: 700px;
                margin: 5px;
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
            }
    
        </style>
    </head>
    
    <body>
    
        <p>
    
        My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger, he was a member of        a small country music            band. They would play at local dances and on a few occasions would play for the local radio station.                                     He often told us how he had auditioned and earned a position in a band that featured Patsy Cline as their lead singer. He told the family that after he was hired he never went back. Dad was a very religious man. He stated 
        that there was a lot          of drinking and cursing the day of his audition and he did not want to be around that type of environment.
    
        Occasionally, Dad would get out his mandolin and            play for the family. We three children: Trisha, Monte and I, George Jr., would often             sing along. Songs such as the Tennessee Waltz, Harbor Lights and around Christmas time, the well-known                 rendition of Silver Bells. "Silver Bells, Silver Bells, its Christmas time       in the city" would ring throughout the house. One of Dad's favorite hymns was "The Old Rugged Cross". We learned the words to the hymn when we were very young, and would sing it with Dad when he would play and sing. Another song that was often shared in our house was a song that accompanied     the Walt Disney series: Davey Crockett. Dad only had to hear the song 
        twice before he learned              it well enough to play it. "Davey, Davey Crockett, King of the Wild Frontier" was a favorite song for the family. He knew we enjoyed the song and the program and would often get out the mandolin after the program was over. I could never get over how he could play the songs so well after only hearing them a few times. I loved to sing, but I never learned how to play the mandolin. This is                   something I regret to this day.
    
    
        </p>
    
    </body>
    
    </html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    在上面的代码中,文本包含了一些空格、制表符和换行符。浏览器遇到多个空格时,会将他们压缩为一个空格,而换行符等其他空白符则会直接被忽略。浏览器会自动处理文本换行,以便各行都能适应元素边界。浏览器的这种处理方式并不是我们想要的,有时候我们就像在HTML源文档中保留文本中的空白,这是,可以使用whitespace属性控制浏览器对空白字符的处理方式,这个属性的值总结如下:

    说明
    normal 默认值,空白符被压缩,文本自动换行
    nowrap 空白符被压缩,文本行不换行
    pre 空白符被保留,文本只在遇到换行符的时候换行,这个pre元素的效果一样
    pre-line 空白符被压缩,文本只会在一行排满或遇到换行符时换行
    pre-wrap 空白符被保留,文本会在一行排满或遇到换行符时换行

    段落首行缩进:text-indent

    该属性是用于“行内元素”设置每个段落首行缩进数量值的属性,CSS字体大小(font-size)可以设置的数值和单位在该属性的值中都可以使用(除了百分比)。如果是用于中文布局,一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。

    文本装饰线:text-decoration

    该属性是为文本上添加一根装饰线,带”href”属性的 <a> 标签默认会带有一根下划线,就是由该属性的值“underline”设置的。“text-decoration”属性有以下值:

    • none:(默认)不显示任何装饰线;

    • underline:在文本下方显示装饰线;

    • overline:在文本上方显示装饰线;

    • line-through:在文本中间显示装饰线,相当于删除线;

    英文字母的大小写转换:text-transform

    该属性能将“行内元素”中的英文文本进行大小写转换,以满足网站对规范性的要求。特别在一些对项目产品细节要求至严的跨国企业或合资企业,他们对网站或应用中的文本格式也有相当高的要求,当网站中的绝大部分英文文本都是由其它地方整理粘贴而来的时候,如果要逐一去修改这些文本,不仅时间成本大大地增加,也容易出现一些难以一时发现的疏漏,这个时候“text-transform”属性就有它的“用武之地”了。该属性有以下属性值:

    • none:(默认)保持文本中英文单词的默认大小写

    • capitalize:每个英文单词首字母为大写字母,其它为小写字母

    • uppercase:将所有英文单词转换为大写字母

    • lowercase:将所有英文单词转换为小写字母

    指定文本方向:direction

    direction有两个值,分别如下:

    • ltr:从左至右;

    • rtl:从右至左;

    提示:direction属性已经从相关CSS模块的最新草案中移除了,不过也没给出具体的原因,说不定在模块最终完善之前还能恢复。

    制定单词、字母、行之间的间距

    可以告诉浏览器单词与单词、字母与字母、行与行之间的间距。相关属性列在下表中:

    属性 说明
    letter-spacing 设置字母之间的间距 normal<长度值>
    word-spacing 设置单词之间的间距 normal<长度值>
    line-height 设置行高 normal/<数值>/<长度值><%>

    文本的阴影:text-shadow

    属性 说明
    text-shadow 为文本块应用阴影 h-shadow,v-shadow,blur,color

    h-shadow和v-shadow值分别指定阴影的水平偏移和垂直偏移。它们的值用长度值(px)表示,允许负值。h-shadow值,“0”表示维持原位,正数为向右偏移,负数为向左偏移;v-shadow值,“0”表示维持原位,正数为向下偏移,负数为向上偏移。blur值也是一个长度值,定义了阴影的模糊程度,该值可选,距离越大模糊程度越高。color值指定阴影的颜色,支持Web技术中的常用颜色模式:“颜色英文单词”“HEX”、“RGBa”、“HSLa”。

    字体样式

    我们可以对文本进行许多改变,其中最基本的一项就是改变用来显示字符的字体。下方列表中描述了字体相关属性。

    字体基本设置

    属性 说明
    font-family 指定文本块采用的字体名称 中文或英文字体名:“宋体”“Arial”
    font-size 指定文本块的字体大小 单位:px/em/%/pt/ex/pc/mm/cm/in)
    font-style 指定字体样式 normal(普通)/italic(斜体)/oblique(倾斜字体)
    font-weight 设置字体粗细 normal/bold/bolder/lighter

    字体的组合写法

    除了为“font”的具体分支属性设置样式,我们还能将“font”的多个值组合起来写,如我们要设置一个风格为正常的粗体,字号为20像素的“微软雅黑”和一个风格为斜体的正常粗细,字号为22像素的“宋体”,我们可以这样写:

    <article>
        <p class="setFont_1">正常风格加粗20像素的微软雅黑字体</p>
        <p class="setFont_2">斜体风格正常粗细22像素的宋体字体</p>
    </article>
    • 1
    • 2
    • 3
    • 4

    对应的CSS代码如下:

    .setFont_1 {
        font: normal bold 20px "微软雅黑";
    }
    .setFont_2 {
        font: italic normal 22px "宋体";
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    由于字体风格和字体粗细,具有一定的相似性,如他们都有一个“normal”值,所以在写“font”属性组合值的时候可以省略二者之一,以辨识到的值进行设置,另外一个自动为“normal”,甚至还能省略掉第前两个值,只保留“font-size”和“font-family”。如下所示:

    .setFont {20px "微软雅黑"}
    
    等价于
    
    .setFont {normal 20px "微软雅黑"}
    
    等价于
    
    .setFont {normal normal 20px "微软雅黑"}
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    但有一点需要强调的是,在“font”组合值的写法中,只有“font-size”和“font-family”这两个的值是不能省略的,而且是缺一不可,否则浏览器会不认识该值,对该组合值进行报错。

    字体颜色 color

    在目前的浏览器标准中,要想改变浏览器默认字体的颜色(#000000)唯一的途径就是通过CSS的“color”属性进行设置。颜色属性可以设置4种类型的值,有以下类型:

    1、颜色英文单词

    可以通过颜色的英文单词直接设置文本的颜色,如“red”、“orange”、“yellow”、“green”、“cyan”、“blue”、“purple”、“pink”、“gray”、“black”和“white”等等。

    2、HEX(16进制颜色)

    通过“#”+16进制表示颜色,有“#”+“三位”和“#”+“六位”的形式。若是“三位”的形式,第一位表示“红”,第二位表示“绿”,第三位表示“蓝”,通过取值区间“0-9”,“a-f”(10-16)的组合,如“#26f”,共计能表达4,096个颜色。若是“六位”的形式,可以表示的颜色数更加细致,第一二为表示“红”,第三四位表示“绿”,第四五位表示“蓝”,同样也是通过取值区间“0-9”,“a-f”的组合,如“#2369fd”,共计能表达16,777,216个颜色。

    3、RGBa/ARGB(Alpha的三原色)

    和“HEX”表示三原色一样,该模式同样也是采用三元色的值来表现色彩,不过“RGBa”颜色模式采用的是10进制的值,格式如“rgb(34, 102, 255)”,值之间用英文逗号“,”进行分割,第一个值表示“红”,第二个值表示“绿”,第三个值表示“蓝”,每个值的区间为“0-255”(256个色阶),共计同样也能表示16,777,216个颜色。除此之外,该模式还支持对不透明度的设置,也就是“RGBa”里面的这个“a”(alpha),它表示不透明度,取值区间是“0到1”之间的浮点数(可保留到两位小数),“0”表示完全透明,“1”表示完全不透明,写法如“rgba(34, 102, 255, 0.55)”、“rgba(34, 102, 255, .9)”或“rgb(34, 102, 255)”。

    4、HSLa(Alpha的Hue、Saturation、Lightness)

    该模式通过设置“色调”(Hue)、“饱和度”(Saturation)、“亮度”(Lightness)和“不透明度”(Alpha)来表现色彩的,不透明度的表示和“RGBa”一样,我们主要来看下面三个值的意义: 
    色调:除开“黑色”和“白色”从纯红色过度到纯蓝色再过度到纯红色这一过程的颜色轴的区间,共计360个色调; 
    饱和度:从该色调的纯黑到该色调的纯色区间,越接近黑色,饱和度越低,越接近纯色,饱和度越高; 
    亮度:从“纯黑”到“纯白”这一过程的表示,越接近黑色亮度越低,越接近白色亮度越高。 
    如例: 
    这是一个色调为316,饱和度75%,亮度56%,不透明度0.9的颜色–HSLa(316, 75%, 56%, 0.9) 
    这是一个色调为76,饱和度35%,亮度45%,不透明的颜色–HSL(76, 35%, 45%)

    5、Transparent(透明)

    只要设置该值,那文本的内容将变为完全透明,即无论背景为什么颜色或图片,都会完全看不到设置的文字元素,只是起到了一个占位作用,除非文本被选中,如下例: 
    这是一段一般人根本不会发现的文字。 
    需要补充的是,“IE 8”浏览器及以下的版本不支持“RGBa”、“HSLa”模式及“Transparent”值,即不支持透明度部分的值,对常规“RGB”和“HSL”模式仍能正常支持。

    展开全文
  • CSS:设置文本字体样式

    千次阅读 2016-09-21 18:14:06
    应用基本的文本样式文本对齐方式:text-align该属性用于控制“行内块元素”或“块元素”内“行内元素”(文本元素)的居中方式的,包含三个值: left:居左对齐; center:居中对齐; right:居右对齐; 空白处理:...

    应用基本的文本样式

    文本对齐方式:text-align

    该属性用于控制“行内块元素”或“块元素”内“行内元素”(文本元素)的居中方式的,包含三个值:

    • left:居左对齐;

    • center:居中对齐;

    • right:居右对齐;

    空白处理:white-space

    空白在HTML文档中通常是被压缩或者直接忽略掉。这允许你将HTML文档的布局跟页面的外观分离。

    <!DOCTYPE html>
    <html lang="zh-cn">
    
    <head>
        <meta charset="UTF-8">
        <title>Example</title>
        <style type="text/css">
    
            p {
                width: 700px;
                margin: 5px;
                padding: 5px;
                border: medium double black;
                background-color: lightgrey;
            }
    
        </style>
    </head>
    
    <body>
    
        <p>
    
        My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger, he was a member of        a small country music            band. They would play at local dances and on a few occasions would play for the local radio station.                                     He often told us how he had auditioned and earned a position in a band that featured Patsy Cline as their lead singer. He told the family that after he was hired he never went back. Dad was a very religious man. He stated 
        that there was a lot          of drinking and cursing the day of his audition and he did not want to be around that type of environment.
    
        Occasionally, Dad would get out his mandolin and            play for the family. We three children: Trisha, Monte and I, George Jr., would often             sing along. Songs such as the Tennessee Waltz, Harbor Lights and around Christmas time, the well-known                 rendition of Silver Bells. "Silver Bells, Silver Bells, its Christmas time       in the city" would ring throughout the house. One of Dad's favorite hymns was "The Old Rugged Cross". We learned the words to the hymn when we were very young, and would sing it with Dad when he would play and sing. Another song that was often shared in our house was a song that accompanied     the Walt Disney series: Davey Crockett. Dad only had to hear the song 
        twice before he learned              it well enough to play it. "Davey, Davey Crockett, King of the Wild Frontier" was a favorite song for the family. He knew we enjoyed the song and the program and would often get out the mandolin after the program was over. I could never get over how he could play the songs so well after only hearing them a few times. I loved to sing, but I never learned how to play the mandolin. This is                   something I regret to this day.
    
    
        </p>
    
    </body>
    
    </html>

    在上面的代码中,文本包含了一些空格、制表符和换行符。浏览器遇到多个空格时,会将他们压缩为一个空格,而换行符等其他空白符则会直接被忽略。浏览器会自动处理文本换行,以便各行都能适应元素边界。浏览器的这种处理方式并不是我们想要的,有时候我们就像在HTML源文档中保留文本中的空白,这是,可以使用whitespace属性控制浏览器对空白字符的处理方式,这个属性的值总结如下:

    说明
    normal 默认值,空白符被压缩,文本自动换行
    nowrap 空白符被压缩,文本行不换行
    pre 空白符被保留,文本只在遇到换行符的时候换行,这个pre元素的效果一样
    pre-line 空白符被压缩,文本只会在一行排满或遇到换行符时换行
    pre-wrap 空白符被保留,文本会在一行排满或遇到换行符时换行

    段落首行缩进:text-indent

    该属性是用于“行内元素”设置每个段落首行缩进数量值的属性,CSS字体大小(font-size)可以设置的数值和单位在该属性的值中都可以使用(除了百分比)。如果是用于中文布局,一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。

    文本装饰线:text-decoration

    该属性是为文本上添加一根装饰线,带”href”属性的 <a> 标签默认会带有一根下划线,就是由该属性的值“underline”设置的。“text-decoration”属性有以下值:

    • none:(默认)不显示任何装饰线;

    • underline:在文本下方显示装饰线;

    • overline:在文本上方显示装饰线;

    • line-through:在文本中间显示装饰线,相当于删除线;

    英文字母的大小写转换:text-transform

    该属性能将“行内元素”中的英文文本进行大小写转换,以满足网站对规范性的要求。特别在一些对项目产品细节要求至严的跨国企业或合资企业,他们对网站或应用中的文本格式也有相当高的要求,当网站中的绝大部分英文文本都是由其它地方整理粘贴而来的时候,如果要逐一去修改这些文本,不仅时间成本大大地增加,也容易出现一些难以一时发现的疏漏,这个时候“text-transform”属性就有它的“用武之地”了。该属性有以下属性值:

    • none:(默认)保持文本中英文单词的默认大小写

    • capitalize:每个英文单词首字母为大写字母,其它为小写字母

    • uppercase:将所有英文单词转换为大写字母

    • lowercase:将所有英文单词转换为小写字母

    指定文本方向:direction

    direction有两个值,分别如下:

    • ltr:从左至右;

    • rtl:从右至左;

    提示:direction属性已经从相关CSS模块的最新草案中移除了,不过也没给出具体的原因,说不定在模块最终完善之前还能恢复。

    制定单词、字母、行之间的间距

    可以告诉浏览器单词与单词、字母与字母、行与行之间的间距。相关属性列在下表中:

    属性 说明
    letter-spacing 设置字母之间的间距 normal<长度值>
    word-spacing 设置单词之间的间距 normal<长度值>
    line-height 设置行高 normal/<数值>/<长度值><%>

    文本的阴影:text-shadow

    属性 说明
    text-shadow 为文本块应用阴影 h-shadow,v-shadow,blur,color

    h-shadow和v-shadow值分别指定阴影的水平偏移和垂直偏移。它们的值用长度值(px)表示,允许负值。h-shadow值,“0”表示维持原位,正数为向右偏移,负数为向左偏移;v-shadow值,“0”表示维持原位,正数为向下偏移,负数为向上偏移。blur值也是一个长度值,定义了阴影的模糊程度,该值可选,距离越大模糊程度越高。color值指定阴影的颜色,支持Web技术中的常用颜色模式:“颜色英文单词”“HEX”、“RGBa”、“HSLa”。

    字体样式

    我们可以对文本进行许多改变,其中最基本的一项就是改变用来显示字符的字体。下方列表中描述了字体相关属性。

    字体基本设置

    属性 说明
    font-family 指定文本块采用的字体名称 中文或英文字体名:“宋体”“Arial”
    font-size 指定文本块的字体大小 单位:px/em/%/pt/ex/pc/mm/cm/in)
    font-style 指定字体样式 normal(普通)/italic(斜体)/oblique(倾斜字体)
    font-weight 设置字体粗细 normal/bold/bolder/lighter

    字体的组合写法

    除了为“font”的具体分支属性设置样式,我们还能将“font”的多个值组合起来写,如我们要设置一个风格为正常的粗体,字号为20像素的“微软雅黑”和一个风格为斜体的正常粗细,字号为22像素的“宋体”,我们可以这样写:

    <article>
        <p class="setFont_1">正常风格加粗20像素的微软雅黑字体</p>
        <p class="setFont_2">斜体风格正常粗细22像素的宋体字体</p>
    </article>

    对应的CSS代码如下:

    .setFont_1 {
        font: normal bold 20px "微软雅黑";
    }
    .setFont_2 {
        font: italic normal 22px "宋体";
    }

    由于字体风格和字体粗细,具有一定的相似性,如他们都有一个“normal”值,所以在写“font”属性组合值的时候可以省略二者之一,以辨识到的值进行设置,另外一个自动为“normal”,甚至还能省略掉第前两个值,只保留“font-size”和“font-family”。如下所示:

    .setFont {20px "微软雅黑"}
    
    等价于
    
    .setFont {normal 20px "微软雅黑"}
    
    等价于
    
    .setFont {normal normal 20px "微软雅黑"}

    但有一点需要强调的是,在“font”组合值的写法中,只有“font-size”和“font-family”这两个的值是不能省略的,而且是缺一不可,否则浏览器会不认识该值,对该组合值进行报错。

    字体颜色 color

    在目前的浏览器标准中,要想改变浏览器默认字体的颜色(#000000)唯一的途径就是通过CSS的“color”属性进行设置。颜色属性可以设置4种类型的值,有以下类型:

    1、颜色英文单词

    可以通过颜色的英文单词直接设置文本的颜色,如“red”、“orange”、“yellow”、“green”、“cyan”、“blue”、“purple”、“pink”、“gray”、“black”和“white”等等。

    2、HEX(16进制颜色)

    通过“#”+16进制表示颜色,有“#”+“三位”和“#”+“六位”的形式。若是“三位”的形式,第一位表示“红”,第二位表示“绿”,第三位表示“蓝”,通过取值区间“0-9”,“a-f”(10-16)的组合,如“#26f”,共计能表达4,096个颜色。若是“六位”的形式,可以表示的颜色数更加细致,第一二为表示“红”,第三四位表示“绿”,第四五位表示“蓝”,同样也是通过取值区间“0-9”,“a-f”的组合,如“#2369fd”,共计能表达16,777,216个颜色。

    3、RGBa/ARGB(Alpha的三原色)

    和“HEX”表示三原色一样,该模式同样也是采用三元色的值来表现色彩,不过“RGBa”颜色模式采用的是10进制的值,格式如“rgb(34, 102, 255)”,值之间用英文逗号“,”进行分割,第一个值表示“红”,第二个值表示“绿”,第三个值表示“蓝”,每个值的区间为“0-255”(256个色阶),共计同样也能表示16,777,216个颜色。除此之外,该模式还支持对不透明度的设置,也就是“RGBa”里面的这个“a”(alpha),它表示不透明度,取值区间是“0到1”之间的浮点数(可保留到两位小数),“0”表示完全透明,“1”表示完全不透明,写法如“rgba(34, 102, 255, 0.55)”、“rgba(34, 102, 255, .9)”或“rgb(34, 102, 255)”。

    4、HSLa(Alpha的Hue、Saturation、Lightness)

    该模式通过设置“色调”(Hue)、“饱和度”(Saturation)、“亮度”(Lightness)和“不透明度”(Alpha)来表现色彩的,不透明度的表示和“RGBa”一样,我们主要来看下面三个值的意义:
    色调:除开“黑色”和“白色”从纯红色过度到纯蓝色再过度到纯红色这一过程的颜色轴的区间,共计360个色调;
    饱和度:从该色调的纯黑到该色调的纯色区间,越接近黑色,饱和度越低,越接近纯色,饱和度越高;
    亮度:从“纯黑”到“纯白”这一过程的表示,越接近黑色亮度越低,越接近白色亮度越高。
    如例:
    这是一个色调为316,饱和度75%,亮度56%,不透明度0.9的颜色–HSLa(316, 75%, 56%, 0.9)
    这是一个色调为76,饱和度35%,亮度45%,不透明的颜色–HSL(76, 35%, 45%)

    5、Transparent(透明)

    只要设置该值,那文本的内容将变为完全透明,即无论背景为什么颜色或图片,都会完全看不到设置的文字元素,只是起到了一个占位作用,除非文本被选中,如下例:
    这是一段一般人根本不会发现的文字。
    需要补充的是,“IE 8”浏览器及以下的版本不支持“RGBa”、“HSLa”模式及“Transparent”值,即不支持透明度部分的值,对常规“RGB”和“HSL”模式仍能正常支持。

    展开全文
  • html设置全局字体样式

    千次阅读 2020-10-06 23:46:12
    背景 需要对一个没有设置布局样式的html文档中所有文字样式进行修改,作为一个不是很了解前端开发的人来说,自然是想有没有那种比较简单,能在html中加几行代码...html字体样式设置 此处设置了整个html中h1、h2、h3、h

    背景

    需要对一个没有设置布局样式的html文档中所有文字样式进行修改,作为一个不是很了解前端开发的人来说,自然是想有没有那种比较简单,能在html中加几行代码就把所有段落字体样式进行统一修改的案例,网上搜了一堆教程发现很多都是要新建一个外部css文件引入,感觉太麻烦,一番波折后终于尝试出了比较适用于新手的速成法。

    说明

    这种方法适用于在不引入外部CSS的情况下,直接在html文档的head节点中为页面中各级节点中包含的文本内容设置字体样式。

    html字体样式设置

    此处设置了整个html中h1、h2、h3、h4、p、li节点内文本的字体样式,color为颜色,font-family为字体类型,font-size为字号大小。需注意的是设置字体时要注意编码格式,这里示例代码中设置的是微软雅黑,如果直接设置成这样:font-family: ‘Microsoft YaHei’,该字体没法在网页中正常展示,因此要转换成unicode编码字体效果才能正常展示:font-family: “\5FAE\8F6F\96C5\9ED1”。

    <head>
    <style>
    h1 {
    	color: rgb(63, 63, 63);
    	font-family: "\5FAE\8F6F\96C5\9ED1";
    	font-size: 18px;
    }
    
    h2 {
    	color: rgb(63, 63, 63);
    	font-family: "\5FAE\8F6F\96C5\9ED1";
    	font-size: 16px;
    }
    
    h3 {
    	color: rgb(63, 63, 63);
    	font-family: "\5FAE\8F6F\96C5\9ED1";
    	font-size: 16px;
    }
    
    h4 {
    	color: rgb(73, 73, 73);
    	font-family: "\5FAE\8F6F\96C5\9ED1";
    	font-size: 16px;
    }
    
    p {
    	color: rgb(73, 73, 73);
    	font-family: "\5FAE\8F6F\96C5\9ED1";
    	font-size: 16px;
    }
    
    li {
    	color: rgb(73, 73, 73);
    	font-family: "\5FAE\8F6F\96C5\9ED1";
    	font-size: 16px;
    }
    </style>
    </head>
    

    参考文献

    How to Apply global font to whole HTML document
    在css中设置font-family:"微软雅黑"却不生效问题

    展开全文
  • 文章目录文本样式colordirectionline-heightletter-spacingtext-aligntext-indenttext-decorationtext-transformwhite-spaceword-spacing字体样式列表无序列表有序列表定义列表列表样式表格表格表格样式 文本样式 ...
  • 我一听很简单啊,动态设置新闻详情 的容器div的样式就好了。 大概是这样的… ​//三种字体类型来回切换 changeFontSize(type){ switch (type) { case 0: return 1; case 1: return -1; case -1: re
  • CSS中的伪类选择器,颜色设置,度量单位,文本字体及文本样式设置
  • HTML设置文字和文本样式

    千次阅读 2020-04-21 17:32:12
    字体设置样式主要是设置字、词的样式,对文本设置样式样式主要是对整段文章设置样式设置文字样式 CSS对文字样式的设计有文字字体设置、文字大小、文字粗体、文字斜体以及字间距等样式设置字体设置 在...
  • CSS中字体与段落属性 毫无疑问,不管什么网站,文字一定是必不可少。文字可以是网页传播信息的主要手段。那么怎么显示文字,才能更加的美观... 设置字体类型 1)该属性主要用来指定文字字体类型,例如...
  • 读取本地网页,读取文本字体样式,读取视频。 res/raw和assets的相同点: 1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制。 res/raw和assets的不同点: 1.res/raw中的文件会被...
  • HTML5常用的文本标签 标签 描述 标题标签 HTML中一共有六级标题,标题按字号大小从大到小为H1、H2、H3、H4、H5、H6 <p> 用于定义HTML中的段落 <br>和<wbr> <br>标签用于插入一...
  • 问题描述:H5前端设置好的字体大小,在WebView中展示时不起作用,导致字体大小都一样 问题解决的方法:给这段HTML代码段,添加头部 /** * 富文本适配 */ private String getHtmlData(String bodyHTML...
  • 我以前实现这种操作的方法是用多个TextView分别设置样式。但是,今天我发现对于一些简单的样式设定,其实只用一个TextView就可以了,直接对字符串样式进行设定好了。 解析: 我们先来看一看安卓developer官方文档: ...
  • 本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧。 HTML中的H标签(H1,H2...
  • CSS总结(基本文本字体样式

    千次阅读 2018-05-21 20:28:33
    基本文本字体样式:颜色:p{color:red;}字体种类:p{font-family:arial;} arial 字体,这个字体可在任何电脑上找到。通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品,尽管它们的字体面几乎相同,但...
  • font:综合设置字体样式(重点) 语法: 选择器 {font:font-style font-weight font-size/line-height font-family;} 说明: 1)使用font属性时,必须按上面语法的顺序书写,不能更换顺序,各个属性以空格隔开 2)注意:其中不...
  • CSS字体文本样式属性

    千次阅读 2020-12-14 14:10:17
    CSS字体、文本样式属性1、字体属性1.1、修改字体样式属性语法:1.2、字体大小属性1.3、字体粗细属性1.4、字体样式属性1.5、字体复合属性2、文本外观属性2.1、文本颜色2.2、对齐方式2.3、装饰文本2.4、文本缩进2.5、...
  • Android TextView设置个别字体样式

    千次阅读 2013-10-22 10:04:03
     TextView 就是用于显示文本的控件,可以在布局文件中通过 android:text 属性设置需要现实的字符,或者通过Context对象的findViewById(XXX) 方法获得TextView对象后,通过setText()方法动态赋值,通过android:...
  • 本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧。 HTML中的H标签(H1,H2...
  • 本篇博客我们主要来说一下用css设置文本样式,内容比较多,大家好好练习一下 一、设置文本的大小、颜色、字体 设置文本大小我们可以使用 font-size,设置颜色我们可以使用 color,字体我们可以使用 font-family ...
  •  TextView 就是用于显示文本的控件,可以在布局文件中通过android:text 属性设置需要现实的字符,或者通过Context对象的findViewById(XXX) 方法获得TextView对象后,通过setText()方法动态赋
  • CSS-字体样式与颜色
  • CSS系列之美化网页/span标签和div标签/字体样式/文本样式 01 span标签和div标签 span标签的作用 能让几个文字或者某个词语凸显出来 属于行内元素 div标签 属于块级元素 程序示例: <!DOCTYPE html>...
  • HTML中如何用CSS设置文本样式

    万次阅读 2012-11-21 17:58:26
    一. 长度单位 1.相对类型 A.... 像素,根据显示设备的分辨率的多少而代表不同的长度,因此属于相对...这是设置以目前字符的高度为单位。比如h1{margin:2em},就会以目前字符的两倍高度来显示。em作为尺度单位时是以f
  • 设置字体、大小和风格的HTML5画布的文本,我们可以设置字体属性画布的上下文字符串包含字体样式,大小,和家庭,以空格分隔。风格可以正常,斜体、粗体。除非另有规定,违约正常字体样式。 字体属性被设置后,我们可以画出...
  • CSS的字体样式

    千次阅读 热门讨论 2020-10-31 22:59:32
    CSS的文本样式字体样式font-family属性font-size属性font-style属性font-weight属性font属性文本样式文本颜色 字体样式 属性名 含义 举例 font-family 设置字体类型 font-family:“隶书” font-size 设置...
  • ArcGIS设置标注显示字体样式

    千次阅读 2020-03-04 22:01:02
    转自:https://jingyan.baidu.com/article/59a015e30baaacf795886570.html
  • font-size:字号大小 ... 相当于当前对象内文本字体尺寸 px 像素,最常用,推荐使用 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family:字体 font-familay...
  • CSS中的字体样式

    千次阅读 2018-04-05 13:40:19
    1. css中的字体样式属性说明font-family设置文本的字体系列font-size设置文本的字号大小color设置文本的色彩(前景色)font-weight设置文本的粗细font-style设置文本的风格(斜体样式)font复合属性,在一个字体的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 91,932
精华内容 36,772
关键字:

html设置文本字体样式