CSS字体

南七星之家  金牌会员 | 2024-9-26 22:34:55 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 829|帖子 829|积分 2489

除了前面先容的背景外，字体设置也是网页设计中的重要组成部分，合适的字体不但会使页面更加美观，也可以提升用户体验。CSS
中提供了一系列用于设置文本字体样式的属性，好比更改字体，控制字体大小和粗细等等。


  • font-family：设置字体；
  • font-style：设置字体的风格，例如倾斜、斜体等；
  • font-weight：设置字体粗细；
  • font-size：设置字体尺寸；
  • font-variant：将小写字母转换为小型大写字母；
  • font-stretch：对字体举行伸缩变形（利用较少，并且主流欣赏器都不支持）；
  • font：字体属性的缩写，可以在一个声明中设置多个字体属性。
1. font-family

font-family
属性用来设置元素内文本的字体。由于字体的种类成千上万，而且有些还不是免费的，因此我们的电脑上险些不大概拥有所有的字体。为了最大程度的包管我们设置的字体能够正常显示，可以通过
font-family
属性定义一个由多少字体名称组成的列表，字体名称之间利用逗号,分隔，欣赏器会首先尝试列表中的第一个字体，如果不支持则尝试下一个，以此类推。
font-family 属性的可选值如下：
值形貌family-name、generic-familyfamily-name：字体名称，一个字体名称就代表一种字体，好比“微软雅黑”就是一种字体；generic-family：字体族，也就是某种类型的字体组合，一个字体族代表一种类型的字体，此中包含很多相似但又不同的字体，好比“sans-serif”就是一种无衬线字体，此中包含很多种相似的字体。字体的默认值取决于欣赏器设置inherit从父元素继续字体的设置 下表中列举了一些常用的字体族（generic-family）：
字体族说明字体serif有衬线字体，即在笔墨笔画的末端添加特殊的装饰线或衬线“Lucida Bright”、“Lucida Fax”、Palatino、“Palatino Linotype”、Palladio、“URW Palladio”、serifsans-serif无衬线字体，即在笔墨笔画末端处是平滑的“Open Sans”、“Fira Sans”、“Lucida Sans”、“Lucida Sans Unicode”、“Trebuchet MS”、“Liberation Sans”、“Nimbus Sans L”、sans-serifmonospace等宽字体，即每个笔墨的宽度都是雷同的“Fira Mono”、“DejaVu Sans Mono”、Menlo、Consolas、“Liberation Mono”、Monaco、“Lucida Console”、monospacecursive草书字体，该字体有连笔大概特殊的斜体效果，会给人一种手写的感觉“Brush Script MT”、“Brush Script Std”、“Lucida Calligraphy”、“Lucida Handwriting”、“Apple Chancery”、cursivefantasy具有特殊艺术效果的字体Papyrus、Herculanum、“Party LET”、“Curlz MT”、Harrington、fantasy 【示例】利用 font-family 属性为 HTML 元素设置字体样式：
  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <title>CSS字体</title>
  9.     <style>
  11.         body {
  13.             font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
  15.         }
  17.     </style>
  19. </head>
  21. <body>
  23.     <h1>font-family 属性</h1>
  25. </body>
  27. </html>
复制代码
运行结果如下图所示：

图：font-family 属性演示
留意：如果字体族或字体名称中包含空格或多个单词，则必须将它们利用引号包裹起来，例如"Times New Roman"、“Courier
New”、“Segoe UI” 等，如果是在元素的 style 属性中利用则必须利用单引号。
在网页设计中最常用的字体族是 serif 和 sans-
serif，由于它们适合阅读。在显示一些程序代码是通常利用等宽字体，如许可以利用程序代码看起来更加工整。
2. font-style

font-style 属性用来设置字体的样式，例如斜体、倾斜等，该属性的可选值如下：
值形貌normal默认值，文本以正常字体显示italic文本以斜体显示oblique文本倾斜显示inherit从父元素继续字体样式 【示例】利用 font-style 属性设置字体的样式：
  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <title>CSS字体</title>
  9.     <style>
  11.         body {
  13.             font-style: oblique;
  15.         }
  17.         .normal {
  19.             font-style: normal;
  21.         }
  23.         .italic {
  25.             font-style: italic;
  27.         }
  29.         .oblique {
  31.             font-style: oblique;
  33.         }
  35.         .inherit {
  37.             font-style: inherit;
  39.         }
  41.     </style>
  43. </head>
  45. <body>
  47.     <p class="normal">normal：显示一个标准的字体</p>
  49.     <p class="italic">italic：显示一个斜体的字体</p>
  51.     <p class="oblique">oblique：显示一个倾斜的字体</p>
  53.     <p class="inherit">inherit：从父元素继承字体样式</p>
  55. </body>
  57. </html>
复制代码
运行结果如下图所示：

图：font-style 属性演示
乍看之下，您大概觉得 italic 和 oblique 的效果是一样的。其实不然，italic 显示的字体的斜体版本，而 oblique
则只是一个倾斜的普通字体。
3. font-weight

font-weight 属性能够设置字体的粗细，可选值如下：
值形貌normal默认值，标准字体bold粗体字体bolder更粗的字体lighter更细的字体100、200、300、400、500、600、700、800、900由细到粗的设置字体粗细，100 为最细的字体，400 等同于 normal，700 等同于 boldinherit从父元素继续字体的粗细 【示例】利用 font-weight 属性设置字体粗细：
  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <title>CSS字体</title>
  9.     <style>
  11.     p.weight-100 {
  13.         font-weight: 100;
  15.     }
  17.     p.weight-200 {
  19.         font-weight: 200;
  21.     }
  23.     p.normal {
  25.         font-weight: normal;
  27.     }
  29.     p.bold {
  31.         font-weight: bold;
  33.     }
  35.     p.bolder {
  37.         font-weight: bolder;
  39.     }
  41.     </style>
  43. </head>
  45. <body>
  47.     <p class="weight-100">font-weight: 100;</p>
  49.     <p class="weight-200">font-weight: 200;</p>
  51.     <p class="normal">font-weight: normal;</p>
  53.     <p class="bold">font-weight: bold;</p>
  55.     <p class="bolder">font-weight: bolder;</p>
  57. </body>
  59. </html>
复制代码
运行结果如下图所示：

图：font-weight 属性演示
4. font-size

font-size 属性用来设置字体的大小（字号），可选值如下：
值形貌xx-small、x-small、small、medium、large、x-large、xx-large以关键字的形式把字体设置为不同的大小，从 xx-small 到 xx-large 依次变大，默认值为 mediumsmaller为字体设置一个比父元素更小的尺寸larger为字体设置一个比父元素更大的尺寸length以数值加单位的形式把字体设置为一个固定尺寸，例如 18px、2em%以百分比的形式为字体设置一个相对于父元素字体的大小inherit从父元素继续字体的尺寸 【示例】利用 font-size 属性设置字体的大小：
  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <title>CSS字体</title>
  9.     <style>
  11.         .xx_small {
  13.             font-size: xx-small;
  15.         }
  17.         .x_small {
  19.             font-size: x-small;
  21.         }
  23.         .small {
  25.             font-size: x-small;
  27.         }
  29.         .medium {
  31.             font-size: x-small;
  33.         }
  35.         .large {
  37.             font-size: large;
  39.         }
  41.         .x-large {
  43.             font-size: x-large;
  45.         }
  47.         .xx-large {
  49.             font-size: xx-large;
  51.         }
  53.         .smaller {
  55.             font-size: smaller;
  57.         }
  59.         .larger {
  61.             font-size: larger;
  63.         }
  65.         .font-20 {
  67.             font-size: 20px;
  69.         }
  71.     </style>
  73. </head>
  75. <body>
  77.     <p class="xx_small">将字体大小设置为：xx-small</p>
  79.     <p class="x_small">将字体大小设置为：x-small</p>
  81.     <p class="small">将字体大小设置为：x-small</p>
  83.     <p class="medium">将字体大小设置为：medium</p>  
  85.     <p class="large">将字体大小设置为：large</p>   
  87.     <p class="x-large">将字体大小设置为：x-large</p>   
  89.     <p class="xx-large">将字体大小设置为：xx-large</p>   
  91.     <p class="smaller">将字体大小设置为：smaller</p>   
  93.     <p class="larger">将字体大小设置为：larger</p>
  95.     <p class="font-20">将字体大小设置为 20 像素</p>
  97. </body>
  99. </html>
复制代码
运行结果如下图所示：

图：font-size 属性演示
5. font-variant

font-variant 属性可以将文本中的小写英笔墨母转换为小型大写字母（转换后的大写字母与转换前小写字母的大小相仿，所以称之为小型大写字母）。font-
variant 属性的可选值如下：
值形貌normal默认值，欣赏器会显示一个标准的字体small-caps将文本中的小写英笔墨母转换为小型大写字母inherit从父元素继续 font-variant 属性的值 【示例】利用 font-variant 属性设置小型大写字母：
  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <title>CSS字体</title>
  9.     <style>
  11.         .normal {
  13.             font-variant: normal
  15.         }
  19.         .small {
  21.             font-variant: small-caps
  23.         }
  25.     </style>
  27. </head>
  29. <body>
  31.     <p class="normal">This is a paragraph</p>
  33.     <p class="small">This is a paragraph</p>
  35. </body>
  37. </html>
复制代码
运行结果如下图所示：

图：font-variant 属性演示
6. font

font 属性与前面先容的 background 属性的功能类似，通过 font 属性可以同时设置多个字体属性，不同的是，利用 font
属性须要遵循以下顺序：
font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar
在利用 font 属性时，有以下几点须要留意：


  • 利用 font 属性时必须按照如上所示的顺序，并且 font-size 和 font-family 两个属性不可忽略；
  • font 属性中的每个参数仅答应设置一个值，除 font-size 和 font-family 属性外，被忽略的属性将被设置为各自的默认值；
  • 若要定义 line-height 属性，则须要利用斜线/将 font-size 和 line-height 属性分开。
【示例】利用 font 属性同时定义多个字体效果：
  1. <!DOCTYPE html>
  3. <html>
  5. <head>
  7.     <title>CSS字体</title>
  9.     <style>
  11.     p.info {
  13.         font: italic bold 12px/30px arial, sans-serif;
  15.     }
  17.     </style>
  19. </head>
  21. <body>
  23.     <p>使用 font 属性需要遵循以下顺序：</p>
  25.     <p class="info">font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar</p>
  27. </body>
  29. </html>
复制代码
运行结果如下图所示：

图：font 属性演示
原文地址CSS字体

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

南七星之家

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表