精华内容
下载资源
问答
我要提问

  • web前端笔记03---与文字有关的样式

     2019-08-09 22:49:09
    font-weight:文字加粗 bold：加粗 ； normal：正常； font-style:文字倾斜 italic:斜体； normal：正常； font-size:文字大小 用数字加单位（像素：px）来表示文字大小 font-family:设置字体 用双引号包裹住... 
    font标签
    

    font-weight:文字加粗
    

      

    • bold：加粗 ；
      • 

    • normal：正常；
      • 

    

    font-style:文字倾斜
    

      

    • italic:斜体；
      • 

    • normal：正常；
      • 

    

    font-size:文字大小
    

      

    • 用数字加单位（像素：px）来表示文字大小
      • 

    

    font-family:设置字体
    

      

    • 用双引号包裹住字体名就可以了；
      • 

    

    font样式的复合写法
    

    -设置行高的时候要在字体大小后面加上’ / '。
    

    行高
    

      

    • line-height:行高:文字在一行里面占用的位置，当行高与容器的高度一致时，文字会垂直居中。
      • 

    • 多行文字测量行高的办法：

        

      1. 确定文字的大小
        2. 

      2. 确定两行文字之间的空隙大小
        3. 

      3. 空袭大小除以2，得出来的值就是每行文字的上下的空袭的大小
        4. 

      4. 注：当行高的大小为奇数时，文字的上方要比下方少一个像素，当行高为偶数时 ，那么文字的上下空隙一致。
        5. 

      

      • 

    

    段落
    

    color：该段落文字的颜色
    

      

    • 正常表示颜色的方式都可以为其值。
      • 

    

    text-align:文本对齐（显示）
    

      

    • left(默认)，right，center。
      • 

    

    em：字体大小的单位
    

      

    • 一般根据当前字体大小来计算
      • 

    

    text-indent：首行缩进
    

      

    • 以em为标准单位
      • 

    

    text-decoration:文本修饰
    

      

    • underline 下划线。
      • 

    • none 没有下划线。
      • 

    

    letter-spacing：字母间距
    

      

    • 数字加上单位就行了。
      • 

    

    word-spacing：单词间距
    

      

    • 以空格为解析单位。
      • 

    

    white-space：强制不换行
    

      

    • normal：正常（换行 ）；
      • 

    • nowrap：不换行；
      • 

    

    小技巧：
    

      

    • 一个空格的大小时宋体字状态下文字大小的一半。
      • 

    • 测量文字的大小最好使用从上到下的方法。
      •
    收起
    展开全文
    css

  • HTML及CSS学习笔记 12 - web中的文字

     2019-05-18 20:41:19
    本文是HTML及CSS课程的第十二课。CSS中文本属性定义字符间距、对其方式、文本缩进等；字体属性定义字体系列、大小、加粗、风格等。本文主要介绍CSS中常见的文本属性和字体属性 
    

    本文是HTML及CSS课程的第十二课。CSS中文本属性定义字符间距、对其方式、文本缩进等；字体属性定义字体系列、大小、加粗、风格等。本文主要介绍CSS中常见的文本属性和字体属性
    

    

    文章目录
    

    一、常见文本属性
    

    CSS中文本属性定义字符间距，对其方式，文本缩进等。
    

    1、文本装饰
    

    CSS中使用text-decoration属性为文本添加装饰线。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 文本装饰 </title>
    <style type="text/css">
      .p1 {text-decoration: none;}
      .p2 {text-decoration: underline;}
      .p3 {text-decoration: overline;}
      .p4 {text-decoration: line-through;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。</p>
    <p class="p2">这里是第二个段落中的文字。</p>
    <p class="p3">这里是第三个段落中的文字。</p>
    <p class="p4">这里是第四个段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
文本装饰
    
说明：
    

      

    • text-decoration属性常见值说明如下：

      


      
属性及值
说明

      
      


      
text-decoration: none;
不添加装饰线，通常用于去掉超链接的下划线

      

      
text-decoration: underline;
为文本添加下划线

      

      
text-decoration: overline;
在文本顶部添加装饰线

      

      
text-decoration: line-through;
在文本中间添加贯穿的装饰线

      
      

      

      • 

    • 另外，可以在一个规则中结合多个装饰线，如下：
      p {text-decoration: underline overline;}

      

      • 

    

    2、文本阴影
    

    CSS中使用text-shadow属性为文本添加阴影效果。文本阴影和盒子阴影非常类似，只不过将阴影效果用在了文字上。text-shadow属性的语法格式如下：
    

    text-shadow: 横向偏移量 纵向偏移量 [模糊范围] [阴影颜色]

    

    下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 文本阴影 </title>
    <style type="text/css">
      .p1 {text-shadow: 2px 2px 3px lightsalmon;}
      .p2 {text-shadow: 2px 2px 3px;}
      .p3 {text-shadow: 2px 2px;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。</p>
    <p class="p2">这里是第二个段落中的文字。</p>
    <p class="p3">这里是第三个段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
文本阴影
    
说明：
    

      

    • 横向偏移量和纵向偏移量为必须值。
      • 

    • 模糊范围为可选值，默认值为0。
      • 

    • 阴影颜色为可选值，默认与文字颜色相同。
      • 

    

    3、文本缩进
    

    CSS中使用text-indent属性可以设置文本的缩进。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 文本缩进 </title>
    <style type="text/css">
      .p1 {width: 350px; border: 1px solid gray; text-indent: 2em;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。这里是第一个段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
文本缩进
    
说明：
    

      

    • 使用text-indent属性，元素的第一行可以缩进一个给定的长度。
      • 

    • 通常，text-indent属性只适用于块级元素，行级元素并不适用。
      • 

    

    4、处理空白符
    

    CSS中white-space样式属性会影响到浏览器对HTML源文档中的空格、tab字符和换行的处理。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 处理空白符 </title>
    <style type="text/css">
      .p1 {width: 350px; border: 1px solid gray; white-space: pre-line;}
      .p2 {width: 350px; border: 1px solid gray; white-space: normal;}
      .p3 {width: 350px; border: 1px solid gray; white-space: nowrap;}
      .p4 {width: 350px; border: 1px solid gray; white-space: pre-wrap;}
      .p5 {width: 350px; border: 1px solid gray; white-space: pre;}
    </style>
  </head>
  <body>
    <p class="p1">这里是  第一个  段落中的
      文字。       这里是第一个            段落中的文字。这里是第一个段落中的文字。</p>
    <p class="p2">这里是  第二个  段落中的
      文字。       这里是第二个            段落中的文字。</p>
    <p class="p3">这里是  第三个  段落中的
      文字。       这里是第三个            段落中的文字。</p>
    <p class="p4">这里是  第四个  段落中的
      文字。       这里是第四个            段落中的文字。</p>
    <p class="p5">这里是  第五个  段落中的
      文字。       这里是第五个            段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
处理空白符
    
说明：
    

      

    • 默认情况下，浏览器会将HTML源文档中换行转换为空格，同时连续多个或一个空白符（空格或tab字符）合并为一个空格。这也是设置样式属性white-space值为normal时的效果。normal是属性white-space的默认值。
      • 

    • white-space属性常见值所表示的行为如下：

      


      
值
空白符
换行符
自动换行

      
      


      
pre-line
合并
保留
允许

      

      
normal
合并
转换为空格
允许

      

      
nowrap
合并
转换为空格
不允许

      

      
pre-wrap
保留
保留
允许

      

      
pre
保留
保留
不允许

      
      

      

      • 

    

    5、文本溢出
    

    CSS中使用overflow属性规定当盒子中的内容超出盒子尺寸时盒子该如何处理。而text-overflow属性规定当盒子中的文本溢出时，文本该如何修剪。这两个属性常常一起用来控制盒子中的文本溢出。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 文本溢出 </title>
    <style type="text/css">
      .p1 {width: 350px; border: 1px solid gray; white-space: nowrap; overflow: hidden; text-overflow: clip;}
      .p2 {width: 350px; border: 1px solid gray; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。这里是第一个段落中的文字。</p>
    <p class="p2">这里是第二个段落中的文字。这里是第二个段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
文本溢出
    
说明：
    

      

    • 样式属性及值text-overflow: clip;表示从盒子边缘修剪文本；text-overflow: ellipsis;表示用省略号来代表被修剪的文本。
      • 

    

    6、文本水平对齐
    

    CSS中样式属性text-align可以设置元素中文本的水平对齐方式。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 文本水平对齐 </title>
    <style type="text/css">
      .p1 {width: 350px; border: 1px solid gray; text-align: left;}
      .p2 {width: 350px; border: 1px solid gray; text-align: right;}
      .p3 {width: 350px; border: 1px solid gray; text-align: center;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。</p>
    <p class="p2">这里是第二个段落中的文字。</p>
    <p class="p3">这里是第三个段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
文本水平对齐
    
说明：
    

      

    • 为样式属性text-align设置值left、right或center会导致元素中的文本分别左对齐、右对齐或居中。
      • 

    

    7、行高
    

    CSS中样式属性line-height可以定义一段文本中，文字加文字上下方留白的高度。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 行高 </title>
    <style type="text/css">
      .p1 {width: 350px; height:48px; border: 1px solid gray; line-height: 24px;}
      .p2 {width: 350px; height:64px; border: 1px solid gray; line-height: 2;}
      .p3 {width: 350px; height:96px; border: 1px solid gray; line-height: 300%;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。这里是第一个段落中的文字。</p>
    <p class="p2">这里是第二个段落中的文字。这里是第二个段落中的文字。</p>
    <p class="p3">这里是第三个段落中的文字。这里是第三个段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
行高
    
说明：
    

      

    • 样式属性line-height用于设置文本的行高。
      • 

    • 当样式属性line-height的值为一个固定的像素值时，行高即为该指定的值。
      • 

    • 当样式属性line-height的值为一个数字时，行高为此数字与当前的字体大小相乘所得的值。
      • 

    • 当样式属性line-height的值为一个百分数时，与值为数字是类似。
      • 

    • 不允许将line-height属性的值设置为负数。
      • 

    

    8、长单词换行
    

    CSS中word-wrap属性和word-break属性可以控制长单词如何换行。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 长单词换行 </title>
    <style type="text/css">
      .p1 {width: 350px; border: 1px solid gray;}
      .p2 {width: 350px; border: 1px solid gray; word-wrap: break-word;}
      .p3 {width: 350px; border: 1px solid gray; word-break: break-all;}
    </style>
  </head>
  <body>
    <p class="p1">I love you soooooooooooooooooooooooooooooooooooo much!</p>
    <p class="p2">I love you soooooooooooooooooooooooooooooooooooo much!</p>
    <p class="p3">I love you soooooooooooooooooooooooooooooooooooo much!</p>
  </body>
</html>

    

    页面浏览效果：
    
长单词换行
    
说明：
    

      

    • 样式属性及值word-wrap: break-word;与word-break: break-all;都能把长单词强行断句。
      • 

    • word-wrap: break-word;会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break: break-all;则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。
      • 

    

    9、字符转换
    

    CSS中使用text-transform属性可以进行大小写字母转换。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 字符转换 </title>
    <style type="text/css">
      .p1 {text-transform: lowercase;}
      .p2 {text-transform: uppercase;}
      .p3 {text-transform: capitalize;}
    </style>
  </head>
  <body>
    <p class="p1">HERE IS THE TEXT IN THE FIRST PARAGRAPH.</p>
    <p class="p2">here is the text in the second paragraph.</p>
    <p class="p3">here is the text in the third paragraph.</p>
  </body>
</html>

    

    页面浏览效果：
    
字符转换
    
说明：
    

      

    • text-transform属性常见值说明如下：

      


      
属性及值
说明

      
      


      
text-transform: lowercase;
将文本中的所有字符都转换为小写字符

      

      
text-transform: uppercase;
将文本中的所有字符都转换为大写字符

      

      
text-transform: capitalize;
将文本中每个单词的首字母转换为大写字符

      

      
text-transform: none;
对文本不做任何改动，默认值

      
      

      

      • 

    

    10、字间隔
    

    CSS中word-spacing属性可以改变字（单词）之间的标准间隔。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 字间隔 </title>
    <style type="text/css">
      .p1 {word-spacing: 10px;}
      .p2 {word-spacing: -0.5em;}
    </style>
  </head>
  <body>
    <p class="p1">HTML and CSS is very interesting.</p>
    <p class="p2">HTML and CSS is very interesting.</p>
  </body>
</html>

    

    页面浏览效果：
    
字间隔
    
说明：
    

      

    • 样式属性word-spacing的默认值为normal，与设置为0效果一样，即按正常间隔显示字（单词）。
      • 

    • word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。如果提供一个负长度值，字之间就会拉近。
      • 

    

    11、字母间隔
    

    属性样式letter-spacing与样式属性word-spacing类似，不过字母间隔letter-spacing修改的是字符或字母之间的间隔。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 字母间隔 </title>
    <style type="text/css">
      .p1 {letter-spacing: 5px;}
      .p2 {letter-spacing: -0.1em;}
    </style>
  </head>
  <body>
    <p class="p1">HTML and CSS is very interesting.</p>
    <p class="p2">HTML and CSS is very interesting.</p>
  </body>
</html>

    

    页面浏览效果：
    
字母间隔
    
说明：
    

      

    • 样式属性letter-spacing的默认值为normal，与设置为0效果一样，即按正常间隔显示字母。
      • 

    • letter-spacing属性的可取值包括所有长度值，设置的长度值会使字母之间的间隔增加或减少指定的量。
      • 

    

    二、常见字体属性
    

    CSS中字体属性定义文字的颜色、字体系列、大小、加粗、风格等。
    

    1、文字颜色
    

    CSS中使用color属性可以设置文字的颜色。前面的章节中我们已经看到很多应用这一属性的例子，这里不再赘述。
    

    2、字体大小
    

    CSS中使用font-size属性设置字体大小。常用的有三种赋值方式，分别是使用像素值、使用百分比、使用倍数。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 字体大小 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .p1 {font-size: 20px;}
      .p2 {font-size: 150%;}
      .p3 {font-size: 2em;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。</p>
    <p class="p2">这里是第二个段落中的文字。</p>
    <p class="p3">这里是第三个段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
字体大小
    
说明：
    

      

    • 使用具体的像素值（px）为font-size属性赋值，字体大小将被固定为具体指定的值。
      • 

    • 使用百分比（%）为font-size属性赋值，字体大小为相对于父元素字体大小的百分比。
      • 

    • 使用倍数（em）为font-size属性赋值，与使用百分比类似，字体大小为相对于父元素字体大小的倍数。
      • 

    • 当没有指定font-size属性时，<body>标签中字体大小默认为16像素。
      • 

    

    3、字体粗细
    

    CSS中使用font-weight属性设置字体粗细。可以设置的值有bold（粗体），normal（正常），lighter（稍细），bolder（稍粗）或者100、200、…、900。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 字体粗细 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .p1 {font-weight: lighter;}
      .p2 {font-weight: normal;}
      .p3 {font-weight: bolder;}
      .p4 {font-weight: bold;}
      .p5 {font-weight: 100;}
      .p6 {font-weight: 300;}
      .p7 {font-weight: 500;}
      .p8 {font-weight: 700;}
      .p9 {font-weight: 900;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。</p>
    <p class="p2">这里是第二个段落中的文字。</p>
    <p class="p3">这里是第三个段落中的文字。</p>
    <p class="p4">这里是第四个段落中的文字。</p>
    <p class="p5">这里是第五个段落中的文字。</p>
    <p class="p6">这里是第六个段落中的文字。</p>
    <p class="p7">这里是第七个段落中的文字。</p>
    <p class="p8">这里是第八个段落中的文字。</p>
    <p class="p9">这里是第九个段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
字体粗细
    
说明：
    

      

    • lighter（稍细），bolder（稍粗）或者100、200、…、900这些值并没有得到浏览器的广泛支持，所以一般并不建议使用。
      • 

    • <h1>标签到<h6>标签默认应用了样式font-weight: bold;。
      • 

    • 不应当通过调整文本大小和文本粗细使段落看上去像标题，或者使标题看上去像段落。要始终正确使用<h1>标签到<h6>标签来定义标题，使用<p>标签来标记段落，这关系到HTML文档中结构和语义的正确性及完整性。
      • 

    

    4、字体风格
    

    CSS中使用font-style属性设置字体风格。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 字体风格 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .p1 {font-style: normal;}
      .p2 {font-style: italic;}
      .p3 {font-style: oblique;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。</p>
    <p class="p2">这里是第二个段落中的文字。</p>
    <p class="p3">这里是第三个段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
字体风格
    
说明：
    

      

    • font-style可以设置字体风格，可能的值有normal（正常），italic（斜体字符），oblique（倾斜文本）。
      • 

    • 注意区分italic和oblique，italic是一套专门针对相对应的字体而设计的斜体字符，而oblique是由浏览器负责把正常的字符倾斜显示，不是所有的字体都有对应的斜体字符，如果设置了italic，当浏览器没有找到斜体字符时，会自动将该字符倾斜显示。
      • 

    

    5、字体系列
    

    CSS中使用font-family属性设置字体系列。
    

    5.1、设置已有的字体系列
    

    我们可以使用font-family属性设置常见的一些字体系列，比如微软雅黑，黑体，宋体，Verdana，Arial，Times New Roman等等。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 字体系列 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      .p1 {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
      .p2 {font-family: 微软雅黑, 黑体, Arial, "Arial Black", sans-serif;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。</p>
    <p class="p1">here is the text in the second paragraph.</p>
    <p class="p2">这里是第三个段落中的文字。</p>
    <p class="p2">here is the text in the fourth paragraph.</p>
  </body>
</html>

    

    页面浏览效果：
    
字体系列
    
说明：
    

      

    • font-family属性的值可以定义一个字体，也可以定义一个字体列表，每个字体用逗号分开，一个字体包括多个单词时使用引号。
      • 

    • 不同用户，不同计算机，不同操作系统上的字体可能都不同，字体列表其实是一个字体优先列表，浏览器优先使用最左边的字体，如果没有找到，再按从左向右的顺序依次寻找字体，直到找到一个字体。
      • 

    • 字体列表的后面应该指定一个“通用字体系列”，如果浏览器没有找到字体列表前面的任何字体，会使用计算机中所拥有的通用字体系列中的字体。常见的通用字体系列如下：

      


      
通用字体系列
说明
常见包含字体

      
      


      
sans-serif 无衬线字体
笔画粗细一致，在计算机屏幕上更容易阅读
Verdana、Arial Black、Arial、微软雅黑、黑体

      

      
serif 有衬线字体
笔画末端有装饰性的线条或凸起，报纸中的正文使用的正是该字体
Times、Georgia、Times New Roman、宋体

      

      
monospace 等宽字体
每个字母宽度一致，常用于软件代码示例
Courier、Courier New、Andale Mono

      

      
cursive 手写体
试图模仿人的手写体
Comic Sans、Apple Chancery、华文行楷

      

      
fantasy 装饰性字体
设计感较强的字体
LAST NINJ、Impact、华文琥珀

      
      

      

      • 

    • 字体列表中的字体通常应该来自于同一个字体系列，以保证网页在使用不同字体时不会有太大变化。
      • 

    • 如果计算机中没有指定的通用字体系列中的任何字体，那浏览器会使用系统默认字体。
      • 

    

    5.2、 添加新的字体系列
    

    在CSS3之前使用font-family属性设置字体时，所指定的字体必须在用户的计算机上提前安装，而同时，我们无法控制用户的计算机上安装了什么字体。
    
CSS3中提供了@font-face规则，允许自定义字体的名称和位置，然后在页面中使用。
    
下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 添加新的字体系列 </title>
    <style type="text/css">
      * {margin: 0; border: 0; padding: 0;}
      @font-face {
        font-family: EmblemaOne;
        src: url("font/EmblemaOne/EmblemaOne.woff"),
             url("font/EmblemaOne/EmblemaOne.ttf");
      }
      .p1 {font-family: EmblemaOne, sans-serif; font-size: 20px;}
    </style>
  </head>
  <body>
    <p class="p1">HTML and CSS is very interesting.</p>
  </body>
</html>

    

    页面浏览效果：
    
添加新的字体系列
    
说明：
    

      

    • 从网络上可以找到并下载需要的字体，本例中选择了EmblemaOne字体。一般，我们要确保找到文件扩展名为.woff和.ttf的字体文件。常见的字体格式说明如下：

      


      
字体格式
文件扩展名
说明

      
      


      
TrueType
.ttf
全真字体，是由Apple公司和Microsoft公司联合推出的

      

      
OpenType
.otf
建立在TrueType基础之上，比TrueType更新

      

      
Embedded OpenType
.eot
OpenType的一种压缩格式，Microsoft公司专用，仅IE支持

      

      
SVG字体
.svg
SVG是一种通用图像格式，SVG字体使用SVG图像格式保存字符

      

      
Web Open Font Format
.woff
建立在TrueType基础之上，已发展为Web字体的事实标准，几乎现代浏览器都支持该格式

      
      

      

      • 

    • CSS中使用@font-face规则引入并定义需要的字体。@font-face规则中属性font-family为该字体指定一个名称，属性url指定字体文件的位置，可以使用绝对路径或相对路径，多个位置之间用,隔开。
      • 

    • 使用font-family属性，指定@font-face规则中定义好的字体名称，对应元素中的字符将会使用自定义字体显示。
      • 

    • 要确保在使用之前@font-face规则已经定义，因此要将@font-face规则放置在CSS属性的前面。
      • 

    

    6、简写的字体设置
    

    在CSS中可以使用font属性一次设置常用的文本及字体属性，font属性的语法格式如下：
    

    font: [font-style] [font-weight] font-size[/line-height] font-family;

    

    下面是一个示例：
    

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> 简写的字体设置 </title>
    <style type="text/css">
      .p1 {width: 350px; border: 1px solid gray; font: 20px 微软雅黑;}
      .p2 {width: 350px; border: 1px solid gray; font: italic bold 16px/2 微软雅黑;}
    </style>
  </head>
  <body>
    <p class="p1">这里是第一个段落中的文字。这里是第一个段落中的文字。</p>
    <p class="p2">这里是第二个段落中的文字。这里是第二个段落中的文字。</p>
  </body>
</html>

    

    页面浏览效果：
    
简写的字体设置
    
说明：
    

      

    • 使用font属性时，至少要指定字体大小（/font-size）和字体系列（font-family）。
      •
    收起
    展开全文
    HTML CSS

  • web前端——css与文字相关的一些常用属性

     2018-03-08 10:34:44
    font-size:12px;设置字体大小，数值越大字号越大，单位有px、em、%、rem、pt等。还可以不写单位。font-family:"黑体"; 设置字体样式，如果设置的字体不是英文，需要用"... 设置文字颜色，可以是单词... 
    font-size:12px;设置字体大小，数值越大字号越大，单位有px、em、%、rem、pt等。还可以不写单位。
    font-family:"黑体"; 设置字体样式，如果设置的字体不是英文，需要用""冒号包起来。
    font-weight:200;  字体加粗，数值越大越粗，不过，只能是整百的，最多不超过900，但是一般只写bold。而且好多写了没效果。
    color:red;  设置文字颜色，可以是单词，可以是颜色值，可以是rgb颜色值。
    font-style: 设置文本的方向，比如顷斜。
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style type="text/css">
        div{
            font-size: 20px;
            font-family: "黑体";
            font-weight: bold;
            color:red;
            font-style: italic;
        }
    </style>
</head>
    <body>
        <div>卡特琳娜</div>
    </body>
</html>

    收起
    展开全文

  • web笔记

     2021-01-09 22:43:41
    font-weight：文字加粗 lighter：细的 normal：普通默认的 bold：加粗 bolder：更粗 设置数值 text-decoration：文字划线 none：无样式 underline：下划线 line-through:中划线 overline：上划线 blink：闪烁（目前... 
    文字与文本相关属性：
    
color：文字颜色
    
font-family：文字字体
    
font-size：文字大小px或pt
    
font-weight：文字加粗
    
lighter：细的
    
normal：普通默认的
    
bold：加粗
    
bolder：更粗
    
设置数值
    
text-decoration：文字划线
    
none：无样式
    
underline：下划线
    
line-through:中划线
    
overline：上划线
    
blink：闪烁（目前浏览器不支持）
    
font-style：文字的样式
    
text-shadow：文字的阴影复合属性
    
color：阴影的颜色
    
xoffset：阴影横行偏移量正值向右
    
yoffset：阴影纵向偏移量正值向下
    
radius：阴影的模糊程度
    
text-transform：文字的大小写（英文）
    
none：默认
    
capitalize：首字母大写
    
uppercase：所以字母大写
    
lowercase：所以字母小写
    
line-height：文字的行高
    
letter-spacing：字符之间的间距
    
word-spacing：单词之间的间距
    
文本的相关属性：
    
text-indent：文本的缩进
    
text-overflow：文本溢出
    
clip：溢出剪裁
    
ellipse：溢出剪裁
    
前提overpse：hedden
    
vertical-align：垂直对齐方式
    
auto：自动对齐
    
baseline：基线对齐
    
sub：与文本下标对齐
    
super：与文本上标对齐
    
top：顶端对齐
    
middle：中间对齐
    
bottom：底端对齐
    
length：偏移距离
    
text-align：水平对齐方式
    
justify两端对齐
    
work-break：文本换行方式
    
normal：依赖于浏览器换行行为
    
break：允许在单词中间换行
    
white-space：空格处理方式-是否换行
    
normal：默认，到达容器边界在换行
    
nowrap：强制在同一行直至结束，如果遇到
    在换行
    
balackground：背景色
    
background-color：背景色
    
background-image：背景图
    
backgrou-attachment：背景图是否可以滚动
    
scroll：滚动
    
fixed：固定
    
backg-position：背景图的位置
    
background-repeat：平铺
    
repeat横纵平铺
    
repeat-x：横向平铺
    
repeat-y:纵向平铺
    
no-repeat：不平铺
    
新增的几个属性
    
background-clip：背景覆盖范围
    
border-box覆盖有边框内边距内容
    
no-clip：同上
    
padding-box：内边距 内容
    
content-box：内容
    
border：复合属性可以设置边框粗细，线性、颜色
    
border-width
    
border-style
    
none
    
hidden
    
dotted：点
    
dashed：虚线
    
soild：实线
    
double：双实线
    
groove：3D凹槽
    
ridge：3D凸槽
    
inset：3D凹入
    
outset：3D凸出
    
border-color
    
border-top|right|
    
border-collapse:行货单元格边框的显示方式
    
seperate：分开
    
collapse：合并
    
border-spacing：单元格与单元格之间的距离前提是分开的
    
caption-side：表标题的位置top bottom
    
empty-cells：单元格如果没有内容时是否显示
    
show
    
hide
    
tabel-layout：表格宽度的布局auto自动fixed固定
    
1、通过col或colgroup设置宽度，表的宽度就是所有列宽度的总和、
    
2、第一行所有单元格设置宽度，表的宽度就是第一行单元格宽度的总和
    
3、直接平均分配，忽略实际宽度
    
列表的相关属性
    
list-style：复合属性
    
list-style-image：让列表编号以图片显示
    
list-style-position：编号的位置是在元素之前outside在元素之类
    
list-style-type：列表编号文字样式
    
动画属性
    
transition-property：针对属性
    
transition-duration：变化时长
    
transition-timing-function：渐变速度
    
aese：慢快慢
    
linear：匀速
    
ease：慢快
    
ease：快慢
    
cubic-bezier：延迟时间
    收起
    展开全文

  • textview 加粗_Android 改变 TextView 内局部样式

     2020-12-06 08:42:33
    Android 开发中经常会有对 TextView 的局部文字样式做单独处理的需求，比如针对某些文字进行加粗或是改变颜色等等。这种处理在 Web 开发中十分简单，HTML 的标签能够很方便的进行调整。但是在 Android 开发中，却要... 
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Web-Day03
    
                                    
                                2021-01-09 23:29:25
                            
    
                            
    
                                
    
                                    文章目录Web-Day03CSS文字CSS文本CSS背景CSS边框CSS表格CSS列表CSS鼠标光标CSS转换CSS过渡CSS动画CSS动画 CSS文字  color：颜色 font-family：字体 font-size：大小  相对长度：em，rem，vw，vh，% 绝对长度：px   ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Web前置课（3）
    
                                    
                                2021-01-09 13:52:04
                            
    
                            
    
                                
    
                                    Web前置课（3）文字与文本相关属性文本相关属性背景与边框相关属性背景相关属性边框相关属性表格与列表相关属性表格相关属性列表相关属性2.5.3 控制光标相关属性2.6 变形与动画相关属性变形相关属性Transition动画...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    文字转化
    
                                    
                                2019-12-26 11:33:48
                            
    
                            
    
                                
    
                                    加粗样式文字转换 在这里插入代码片        你好          1.java编程从入门到放弃  2.mysql编程从入门到入狱  3.web开发从入门到入土  4.联系方式：8888888         # 欢迎使用Markdown编辑器 你好！ 这是你第一次...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        javascript   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    WEB前端-html基础篇
    
                                    
                                2019-09-06 11:20:59
                            
    
                            
    
                                
    
                                    Web页或Web应用，就是互联网上的一个网页程序，通常以 .html或.htm作为后缀的文件 WEB页是由HTML编写而成 ...a : 26个字符中的首字符 超文本a:超链接的功能 ... 超文本b:给文字加粗   Markup :标记，规定了超文本的...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web前端基础摘要
    
                                    
                                2019-04-08 20:32:34
                            
    
                            
    
                                
    
                                    ctrl+B 将文字加粗 ctrl+1 /2 /3 标题 ctrl+shift + i 插入图片 不是编程语言 编程语言都会有自己的语法结构 html语言不是编程语言 它是标记语言 一组标签 --》特定功能—》浏览器里的渲染引擎 html   hyper  超 ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Web 安全问题
    
                                    
                                2016-08-19 16:00:10
                            
    
                            
    
                                
    
                                    HTML: 网页的根本,用于设置网页哪里显示图片,哪里显示文字,哪里显示输入CSS: 网页样式,就是类似皮肤,同样是文字,带不带加粗变色等等JS: 网页脚本,一种脚本语言,用来操作网页上的节点和处理一些数据HTTP基础: 网络...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web常用标签
    
                                    
                                2019-02-21 16:57:32
                            
    
                            
    
                                
    
                                    上面是文字，下面是效果 开始和结束 用来设置网页标题  设置网页编码方式 标题标签  段落标签 组合行内元素 为 input 元素定义标注 斜体文本 加粗文本  strong 标签同样加粗 文本自带下划线  &gt;删除线文本 ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web前端基础6
    
                                    
                                2018-09-25 17:11:33
                            
    
                            
    
                                
    
                                    表格样式注意事项： ...th里面的内容上下居中显示，文字加粗；  td的内容默认上下居中，文字居左显示；  table决定整个表格的宽度；  table里面单元格的宽度会转换为百分比；  表格里面的每一列必须有宽度； ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web标准 做有意义的事
    
                                    
                                2008-12-29 13:37:44
                            
    
                            
    
                                
    
                                    选择合适的标签 1）布局 网页头部 网页内容 网页底部 2) 文本 文章标题 文章副标题 —用于识别标题内容 正文 文字加粗 文字加粗 3）图片及其他元素 [...]...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web学习（九）浏览器的默认样式及其清除及其他样式
    
                                    
                                2019-06-22 19:13:09
                            
    
                            
    
                                
    
                                    1.文字加粗及斜体等的字体的默认样式  文字加粗： font-weight:normal;  文字斜体： font-style:normal;  2.清除body，ul等元素的边距及填充的默认样式  padding:0;  margin:0;  3.li的默认样式清除  li-style:none;...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web前端表格学习
    
                                    
                                2017-02-21 15:32:33
                            
    
                            
    
                                
    
                                    2017.2.21 表格标签： （属性：borde边框属性，cellpadding内容与边框的距离，cellspdding单元格之间的空格）  (表示行)  （表示头标，特点文字加粗水平显示）
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    JAVA Web 04 HTML
    
                                    
                                2020-08-25 20:27:18
                            
    
                            
    
                                
    
                                    文字标签  	<font size="5" color="blue" face="arial black">文字标签</font>  格式化标签 		<h2>文本标签</h2> 		<b>加粗</b> 		<strong>加粗</s
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        html   
                                        html5   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web前端html
    
                                    
                                2019-04-11 23:00:00
                            
    
                            
    
                                
    
                                    strong字体加粗  i，em字体倾斜    del删除字体，中间有横杠  u字体下加下划线  img:图像标签    1、src图片路径  2、alt替换文本  3、title鼠标悬停时显示文字    a标签：    <a href="http://www.sina.com">...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    记录-web(语义化）
    
                                    
                                2020-03-18 18:58:22
                            
    
                            
    
                                
    
                                    web语义化 语义化：让网页的含义更加明确...都是用来进行语气的强调的，但em强调的文字会斜体显示出来，strong强调的文字会加粗显示，表示用更强烈的语气来强调 自定义列表dl，列表项dt，描述dd eg：<dl》 <d...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web前端之html基础知识初级
    
                                    
                                2019-10-03 22:38:42
                            
    
                            
    
                                
    
                                    单标签 1.注释标签： ctrl+/ ...文本加粗显示：或者  文字斜体显示： 或  下划线标签：或者 删除价格标签：或者 图片标签： sec:设置一个图片要显示的路径 title：设置鼠标悬停图片显示的文字 al...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    学习web day02
    
                                    
                                2019-09-04 17:27:54
                            
    
                            
    
                                
    
                                     行内样式   我是一级标题 2.内嵌样式  		 5.color字体颜色 ...8.	font-weight字体加粗 9.font-style字体倾斜 10.	文字修饰（text-decoration）:p默认情况下是text-decoration：none； underline下划线 overlin...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web-front-basic
    
                                    
                                2014-02-12 20:51:08
                            
    
                            
    
                                
    
                                    ：加粗文字  ：给文字加下划线  、：跟文字加删除线  ：文本居中              适用于文字段中少量的引用，适用于一段或多段文字的引用。同时, IE浏览器并不支持q 标签            在严格的HTML中，body的...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web前端学习之CSS
    
                                    
                                2020-10-10 20:42:35
                            
    
                            
    
                                
    
                                    web前端学习之CSS什么是CSS为什么要...CSS（Cascading Style Sheets）：全程为层叠样式表，它主要用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、加粗等等。 为什么要使用CSS 使用CSS样式的好处是通过定义
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        css   
                                        css3   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web初探-css-用CSS设置文本样式
    
                                    
                                2019-07-30 23:50:43
                            
    
                            
    
                                
    
                                    设置文字的字体 属性：font-family 值 例如英文：times New Roman ...设置文字的加粗效果 属性：font-weight 值 例如：bold（加粗），normal（普通的，不加粗） 设置英文字母大小写转换 属性：t...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        css   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Web —— 语言 :: Markdown语法
    
                                    
                                2020-04-18 14:45:43
                            
    
                            
    
                                
    
                                    **这是加粗的文字** *这是倾斜的文字*` ***这是斜体加粗的文字*** ~~这是加删除线的文字~~  引用 >这是引用的内容 >>这是引用的内容 >>>>>>>>>>这是引用的内容  效果如下： ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    web前端--Html4
    
                                    
                                2020-06-10 22:41:49
                            
    
                            
    
                                
    
                                    web前端–html4练习 标签总览： <!DOCTYPE html> <html> 	<...-- b标签加粗文字 br标签换行--> 		<b> 			黄鹤楼送孟浩然之广陵 		</b><br /> 		故人西辞黄鹤楼
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        html   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Web基本教程~05.CSS属性
    
                                    
                                2021-01-08 15:29:00
                            
    
                            
    
                                
    
                                    此文转载自：...     Web基本教程~05.CSS属性 上一期 背景属性在上一期 字体属性 CSS 字体属性定义字体，加粗，大小，文字样式 color 规定文本的颜色 <html> 　<head> 　...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        列表   
                                        css   
                                        html   
                                        python   
                                        css3   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    WEB前端学习-基础语法
    
                                    
                                2020-08-22 11:39:42
                            
    
                            
    
                                
    
                                    WEB前端学习-基础语法 一、基本语法 所有标记的标准属性： id ：唯一标识 title：鼠标移到上面提示的文字 class ：css中使用 style：css中使用 1.文本标记 1、标题元素 语法：<hn> </hn> n表示数字1到6...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        html   
                                        html5   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    Web前端之HTML
    
                                    
                                2020-11-01 18:14:46
                            
    
                            
    
                                
    
                                    文字底线：<U> 加粗标记：<b></b> 删除标记：<s></s> 上标：<sup></sup> 下标：<sub></sub> 换行标记：<br> 空标记：没有终止标记 <div>:网页...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        html   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    WEB_HTML标签
    
                                    
                                2019-04-02 20:43:00
                            
    
                            
    
                                
    
                                    <!--注释HTML页面的基本结构html标签 head: 页面的设置和文件的导入 body: ...<!--h 代表标题标签--><!--hr标签 代表分割线--><...--br标签 代表指定的换行-->...--p 段落标签(处理文字)-->...加粗标...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                        ... 
                    
                        7 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    122
            

            

                精华内容
                    48
            

        

        

            
热门标签

            
        


        


        

            关键字：
web文字加粗