css中的文字

CSS 字体系列

在 CSS 中,有两种不同类型的字体系列名称:

  • 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")
  • 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")

除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:

  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体
  • 字体风格

    font-style 属性最常用于规定斜体文本。

    该属性有三个值:

    • normal - 文本正常显示
    • italic - 文本斜体显示
    • oblique - 文本倾斜显示
    • 字体大小

      font-size 属性设置文本的大小。

      有能力管理文本的大小在 web 设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。

      请始终使用正确的 HTML 标题,比如使用 <h1> - <h6> 来标记标题,使用 <p> 来标记段落。

      font-size 值可以是绝对或相对值。

      绝对值:

      • 将文本设置为指定的大小
      • 不允许用户在所有浏览器中改变文本大小(不利于可用性)
      • 绝对大小在确定了输出的物理尺寸时很有用

      相对大小:

      • 相对于周围的元素来设置大小
      • 允许用户在浏览器改变文本大小

      注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。

      使用像素来设置字体大小

      通过像素设置文本大小,可以对文本大小进行完全控制:

      实例

      h1 {font-size:60px;}
      h2 {font-size:40px;}
      p {font-size:14px;}

      在 Firefox, Chrome, and Safari 中,可以重新调整以上例子的文本大小,但是在 Internet Explorer 中不行。

      虽然可以通过浏览器的缩放工具调整文本大小,但是这实际上是对整个页面的调整,而不仅限于文本。

      使用 em 来设置字体大小

      如果要避免在 Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替 pixels。

      W3C 推荐使用 em 尺寸单位。

      1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。

      浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

      可以使用下面这个公式将像素转换为 em:pixels/16=em

      (注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em

原文地址:https://www.cnblogs.com/xiaozhou619/p/9501165.html

时间: 2024-11-09 05:51:49

css中的文字的相关文章

html&amp;css中的文字对齐问题

html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示. 两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对齐,如下图所示. 听起来好像挺简单,然而实现起来却...... 错误做法一: 用一个大块div包住两个div,在大div中设置"text-align:center; ",在小div中设置"text-align:left; " 结果如下图所示. 因为div会占据一整行,而不能

css中要求文字必须是一行,超出部分自动隐藏的问题

问题:客户要求文字必须是一行,超出部分自动隐藏.而现在没有办法在php里控制截取字数,只能在前端css里处理. 首页div的宽度是一定的. 处理办法为: word-break: keep-all;/*这个可以不要*/ word-wrap: break-word; white-space: nowrap;<span style="color: rgb(85, 85, 85); font-family: 微软雅黑, PMingLiU, Verdana, Arial, Helvetica, sa

在CSS中隐藏文字的技巧

通常偏移掉字体的方式是: (1)使用{text-indent:-9999px}; 可是他有一个局限性 他只适用于块级元素block而我们往往有时候想偏移掉的a上的字体所以问题就来了text-indent:-9999px;虽然用起来比较惬意将a转化 成block的话 往往 他身后的的元素就被他赶到下一行了如果正好这个a后面 是一个a按钮就要用float来浮动以使他身后再出现簇拥者这样是不是有些麻烦呢 (2){line-height:0;font-size:0;overflow:hidden;} 能

CSS文本与文字

CSS中长度与颜色 CSS中的文字属性 CSS中的文本属性 14.1 CSS中长度与颜色 长度单位                 说明 in                英寸 cm                公分 mm                公里 cm                以目前字体高度为单位 ex                以小写字母高度为单位(大部分不支持) pt                1pt/72英寸 pc                1pc/12p

CSS中有关水平居中和垂直居中的解决办法

CCS中让div等块级元素在父级元素中居中的方法: (1)div{  margin:0 auto   } 该方法只能实现水平的居中,无法实现元素的垂直居中 (2)当div元素的宽高是固定的,然后设置位置为绝对位置absolute,左边框和上边框的距离设置为50%,这个50%就是指具有定位为absolute或者是relative的祖元素的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半.: . parent{ position:relative: }

css中文字能够撑开高度吗

css中文字能够撑开高度吗:本章节介绍一个可能比较误导人的概念.那就是当一个div没有设置高度的时候,可能很多人认为它的高度是由内部的文字撑开的,真的是这样吗,下面就通过代码实例进行一下验证,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softw

(转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)

一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: left;padding: 10px;border: 1px solid red;} 5 #big span {font-size: 24px;font-weight: bold; margin: 0 auto;} 6 </style> 7 <div id="big">

DIV+CSS中让布局居中_背景图片居中_文字内容居中

DIV+CSS中让布局居中_背景图片居中_文字内容居中

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时