您的位置：龙城通 > css字体加粗 CSS 字体

css字体加粗 CSS 字体

2023-03-22 15:00 CSS教程

css字体加粗 CSS 字体

css字体加粗

CSS可以选择字体系列，设置字体大小，控制字体重量，并添加字体样式。

Font Family

font-family 属性按照首选项的顺序指定字体。浏览器以第一个字体开始，并使用可用的字体。

CSS定义了一些可用的通用字体。浏览器用于呈现它们的确切字体可以有变化。通用字体系列的摘要可以在下表中找到。

通用字体	示例实现字体
serif	Times
sans-serif	Helvetica
cursive	Zapf-Chancery
fantasy	Western
monospace	Courier

以下代码显示应用于文本块的font-family属性。

p  {
    font-family: "HelveticaNeue  Condensed", monospace;
}

如果HelveticaNeue Condensed在您的系统中不可用，则使用通用等宽。

font-size

font-size 属性设置字体的大小。此属性的允许值在以下列表中描述。

xx-small
x-small
small
medium
large
x-large
xx-large
设置字体大小。浏览器负责决定每个值表示的确切大小。
smaller
larger
相对于父元素的字体大小设置字体大小。
length
使用CSS长度值精确设置字体大小。
%
将字体大小设置为父元素的字体大小的百分比。

以下代码显示了 font-size 属性。

<html>
<head>
<style type="text/css">


p.absoluteone {
  font-size: xx-small;
}

p.absolutetwo {
  font-size: x-small;
}

p.absolutethree {
  font-size: small;
}

p.absolutefour {
  font-size: medium;
}

p.absolutefive {
  font-size: large;
}

p.absolutesix {
  font-size: x-large;
}

p.absoluteseven {
  font-size: xx-large;
}

p.pixelsone {
  font-size: 9px;
}

p.pixelstwo {
  font-size: 12px;
}

p.pixelsthree {
  font-size: 14px;
}

p.pixelsfour {
  font-size: 18px;
}

p.pixelsfive {
  font-size: 24px;
}

p.pixelssix {
  font-size: 36px;
}

p.pixelsseven {
  font-size: 48px;
}

p.picaone {
  font-size: 1pc;
}

p.picatwo {
  font-size: 2pc;
}

p.picathree {
  font-size: 3pc;
}

p.picafour {
  font-size: 4pc;
}

p.pointone {
  font-size: 9pt;
}

p.pointtwo {
  font-size: 12pt;
}

p.pointthree {
  font-size: 14pt;
}

p.pointfour {
  font-size: 18pt;
}

p.pointfive {
  font-size: 24pt;
}

p.pointsix {
  font-size: 36pt;
}

p.pointseven {
  font-size: 48pt;
}

p.relativeone {
  font-size: smaller;
}

p.relativetwo {
  
}

p.relative {
  font-size: larger;
}

p.emone {
  font-size: 1em;
}

p.emtwo {
  font-size: 2em;
}

p.emthree {
  font-size: 3em;
}

p.emfour {
  font-size: 4em;
}

p.exone {
  font-size: 1ex;
}

p.extwo {
  font-size: 2ex;
}

p.exthree {
  font-size: 3ex;
}

p.exfour {
  font-size: 4ex;
}

p.exfive {
  font-size: 5ex;
}

p.exsix {
  font-size: 6ex;
}

p.exseven {
  font-size: 7ex;
}

p.percentone {
  font-size: 50%;
}

p.percenttwo {
  font-size: 75%;
}

p.percentthree {
  font-size: 100%;
}

p.percentfour {
  font-size: 150%;
}

p.percentfive {
  font-size: 200%;
}

p.percentsix {
  font-size: 400%;
}
</style>

</head>

<body>

  <div class="page">

    <h1>Font Sizes</h1>

    <div class="column">

      <h2>Absolute</h2>
      <p class="absoluteone">xx-small</p>
      <p class="absolutetwo">x-small</p>
      <p class="absolutethree">small</p>
      <p class="absolutefour">medium</p>
      <p class="absolutefive">large</p>
      <p class="absolutesix">large</p>
      <p class="absoluteseven">large</p>

    </div>
    <div class="column">

      <h2>Pixels</h2>
      <p class="pixelsone">9 px</p>
      <p class="pixelstwo">12 px</p>
      <p class="pixelsthree">14 px</p>
      <p class="pixelsfour">18 px</p>
      <p class="pixelsfive">24 px</p>
      <p class="pixelssix">36 px</p>
      <p class="pixelsseven">48 px</p>

    </div>
    <div class="column">

      <h2>Points</h2>
      <p class="pointone">9 pt</p>
      <p class="pointtwo">12 pt</p>
      <p class="pointthree">14 pt</p>
      <p class="pointfour">18 pt</p>
      <p class="pointfive">24 pt</p>
      <p class="pointsix">36 pt</p>
      <p class="pointseven">48 pt</p>

    </div>
    <div class="column">

      <h2>Picas</h2>
      <p class="picaone">1 pc</p>
      <p class="picatwo">2 pc</p>
      <p class="picathree">3 pc</p>
      <p class="picafour">4 pc</p>

    </div>

    <hr />

    <div class="column">

      <h2>Relative Sizes</h2>
      <p class="relativeone">smaller</p>
      <p class="relativetwo">no style</p>
      <p class="relativethree">larger</p>

    </div>
    <div class="column">

      <h2>Ems</h2>
      <p class="emone">1em</p>
      <p class="emtwo">2em</p>
      <p class="emthree">3em</p>
      <p class="emfour">4em</p>

    </div>
    <div class="column">

      <h2>Exs</h2>
      <p class="exone">1ex</p>
      <p class="extwo">2ex</p>
      <p class="exthree">3ex</p>
      <p class="exfour">4ex</p>
      <p class="exfive">5ex</p>
      <p class="exsix">6ex</p>
      <p class="exseven">7ex</p>

    </div>
    <div class="column">

      <h2>Percents</h2>
      <p class="percentone">50%</p>
      <p class="percenttwo">75%</p>
      <p class="percentthree">100%</p>
      <p class="percentfour">150%</p>
      <p class="percentfive">200%</p>
      <p class="percentsix">400%</p>

    </div>

  </diV>

</body>
</html>

font-weight

您可以使用font-weight属性设置字体的权重。其可能的值为：

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

以下代码使用 font-weight 和 font-style 属性。

<!DOCTYPE HTML>
<html>
<head>
<style>
p.one {
  font-weight: normal;
}

p.two {
  font-weight: bold;
}

p.three {
  font-weight: normal;
}

p.three span {
  font-weight: bolder;
}

p.four {
  font-weight: bold;
}

p.four span {
  font-weight: lighter;
}

p.five {
  font-weight: 100;
}

p.six {
  font-weight: 200;
}

p.seven {
  font-weight: 300;
}

p.eight {
  font-weight: 400;
}

p.nine {
  font-weight: 500;
}

p.ten {
  font-weight: 600;
}

p.eleven {
  font-weight: 700;
}

p.twelve {
  font-weight: 800;
}

p.thirteen {
  font-weight: 900;
}

.column {
  width: 150px;
  float: left;
  margin-right: 30px;
}
</style>
</head>

<body>
  <h1>Font Weight</h1>

  <div class="column">
    <p class="one">normal</p>
    <p class="two">bold</p>
    <p class="three">
      <span>bolder</span>.
    </p>
    <p class="four">
      <span>lighter</span>.
    </p>
  </div>

  <div class="column">
    <p class="five">100</p>
    <p class="six">200</p>
    <p class="seven">300</p>
    <p class="eight">400</p>
    <p class="nine">500</p>
    <p class="ten">600</p>
    <p class="eleven">700</p>
    <p class="twelve">800</p>
    <p class="thirteen">900</p>
  </div>

</body>
</html>

font-style

font-style属性选择normal，italic和oblique字体。

斜体字体和斜体字体之间有区别，但是区别对文本的外观没有什么区别。

以下代码使用 font-weight 和 font-style 属性。

p.one {
  font-style: normal;
}

p.two {
  font-style: italic;
}

p.three {
  font-style: oblique;
}

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">

p.one {
  font-style: normal;
}

p.two {
  font-style: italic;
}

p.three {
  font-style: oblique;
}
</style>

</head>

<body>

  <p class="one">This is a normal font</p>
  <p class="two">This is an italic font</p>
  <p class="three">This is an oblique font</p>

</body>
</html>

相关属性

属性	描述	CSS
@font-face	从web加载字体	3
font-family	设置文本的字体系列	1
font-size-adjust	设置在发生字体回退时文本的可读性	3
font-size	设置文本的字体大小	1
font-stretch	为字体系列选择正常，浓缩或展开的面	3
font-style	设置文本的字体样式	1
font-variant	设置为使用小写字体	1
font-weight	设置字体的粗细	1
font	字体的简写属性	1

阅读全文

以上是龙城通为你收集整理的css字体加粗 CSS 字体全部内容。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。

全部标签 标签详情

css注释写法正确的是 CSS 注释

CSS教程

CSS 注释注释用于解释您的代码，它们被浏览器忽略。CSS注释以“”结尾，例如：p{ color:red; text-align:center;}例子以下代码在...
css分组选择器 CSS 分组和嵌套

CSS教程

CSS 分组和嵌套选择器 CSS 分组可以将具有相同样式的选择器进行分组，减少代码量。CSS 嵌套适用于选择器内部的选择器的样式。...
css教程pdf CSS 教程导读

CSS教程

CSS教程导读通过使用 CSS 来我们可以大大提升网页开发的工作效率！在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网...
css链接样式的写法 CSS 链接样式

CSS教程

CSS 链接不同的链接可以有不同的样式。链接样式链接的样式，可以用任何 CSS 属性（如颜色，字体，背景等）。特别的链接，可以...
css 轮廓 CSS 轮廓（outline）属性

CSS教程

CSS Outlines 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定...
javascript,html JavaScript 和 HTML DOM 参考手册

HTML教程

//www..cn/jsref/...
html元素有哪些 HTML 元素

HTML教程

HTML 元素HTML 文档由 HTML 元素定义，HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。HTML 元素开始...

css字体加粗 CSS 字体

css字体加粗 CSS 字体

css字体加粗

CSS可以选择字体系列，设置字体大小，控制字体重量，并添加字体样式。

Font Family

font-size

font-weight

font-style

相关属性

css注释写法正确的是 CSS 注释

css分组选择器 CSS 分组和嵌套

css教程pdf CSS 教程导读

css链接样式的写法 CSS 链接样式

css 轮廓 CSS 轮廓（outline）属性

javascript,html JavaScript 和 HTML DOM 参考手册

html元素有哪些 HTML 元素