Home >Web Front-end >CSS Tutorial >What are the commonly used font attributes in css? Detailed explanation of font properties
Font setting is an important part of web design. Appropriate fonts will not only make the page more beautiful, but also improve the user experience. CSS provides a series of properties for setting text font styles, such as changing fonts, controlling font size and thickness, and so on.
【Recommended learning: css video tutorial】
Attribute | Description | CSS |
---|---|---|
font | Set all font properties in one statement | 1 |
font-family | Specifies the font family of the text | 1 |
font-size | Specifies the font size of the text | 1 |
font-style | Specifies the font style of the text | 1 |
font-variant | Specifies the font style of the text | 1 |
##font-weight | Specify the thickness of the font1 | |
A rule that allows websites to download and use other than Font for "Web-safe" font | 3 | |
Specify aspect value for element | 3 | |
Shrink or stretch the current font family | 3 |
Optional values for the font-family attribute are as follows:
Description | |
---|---|
family-name: font name, a font name represents a font, such as "Microsoft Yahei" is a font; | generic-family : Font family, that is, a certain type of font combination. A font family represents a type of font, which contains many similar but different fonts. For example, "sans-serif" is a sans-serif font, which contains many similar fonts. Default value of font depends on browser settings |
Inherits font settings from parent element |
Description | Font | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
A serif font, that is, adding special decorative lines or serifs at the end of the text strokes | "Lucida Bright"," Lucida Fax", Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Sans serif font, that is, at the end of the text strokes Everything is smooth | "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Monospace font, that is, the width of each text is the same | "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
cursive font, this font has continuous strokes or special italic effects, It will give people a handwriting feeling | "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Fonts with special artistic effects | Papyrus, Herculanum, "Party LET", "Curlz MT", Harrington, fantasy |
Value | Description |
---|---|
normal | Default value, the text is displayed in normal font |
italic | Text is italic |
oblique | Text is italic |
inherit | Inherit font style from parent element |
[Example] Use the font-style attribute to set the font style:
<!DOCTYPE html> <html> <head> <title>CSS字体</title> <style> body { font-style: oblique; } .normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } .inherit { font-style: inherit; } </style> </head> <body> <p class="normal">normal:显示一个标准的字体</p> <p class="italic">italic:显示一个斜体的字体</p> <p class="oblique">oblique:显示一个倾斜的字体</p> <p class="inherit">inherit:从父元素继承字体样式</p> </body> </html>
The running results are shown in the figure below:
At first glance, you may think that italic and oblique have the same effect. In fact, italic displays an italicized version of the font, while oblique is just a regular font that is slanted.
The font-weight attribute can set the thickness of the font. The optional values are as follows:
Value | Description |
---|---|
normal | Default value, standard font |
bold | Bold font |
bolder | Bolder font |
lighter | More Thin font |
Set the font thickness from thin to thick, 100 is the minimum Thin font, 400 is equivalent to normal, 700 is equivalent to bold | |
Inherit the weight of the font from the parent element |
<!DOCTYPE html> <html> <head> <title>CSS字体</title> <style> p.weight-100 { font-weight: 100; } p.weight-200 { font-weight: 100; } p.normal { font-weight: normal; } p.bold { font-weight: bold; } p.bolder { font-weight: bolder; } </style> </head> <body> <p class="weight-100">font-weight: 100;</p> <p class="weight-200">font-weight: 200;</p> <p class="normal">font-weight: normal;</p> <p class="bold">font-weight: bold;</p> <p class="bolder">font-weight: bolder;</p> </body> </html>The running results are as shown below: ##4, font-size
Description | ##xx-small, x-small, small, medium, large, x-large, xx-large |
---|---|
smaller | |
larger | |
length | |
% | |
inherit | |
##5, font-variant
normal | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
small-caps | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
inherit | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
【示例】使用 font-variant 属性设置小型大写字母: <!DOCTYPE html> <html> <head> <title>CSS字体</title> <style> .normal { font-variant: normal } .small { font-variant: small-caps } </style> </head> <body> <p class="normal">This is a paragraph</p> <p class="small">This is a paragraph</p> </body> </html> 运行结果如下图所示: 6、fontfont 属性与前面价绍的 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 属性同时定义多个字体效果: <!DOCTYPE html> <html> <head> <title>CSS字体</title> <style> p.info { font: italic bold 12px/30px arial, sans-serif; } </style> </head> <body> <p>使用 font 属性需要遵循以下顺序:</p> <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> </body> </html> 运行结果如下图所示: 7、@font-face以前在给网页文字设置一些好看的字体时,限于用户系统是否安装此字体,而只能使用三种方法解决,要么用通用字体,要么用图片替换文本,要么用Flash。而这几种方法却存在严重的缺陷。 现在好了,
浏览器兼容性问题 其实, @font-face语法 @font-face { font-family: <字体名>; src: <字体路径> [<格式>][,<字体路径> [<格式>]]*; [font-weight: <粗细>]; [font-style: <样式>]; } 取值说明:
@font-face小例子 <style type="text/css"> /* 定义 @font-face 规则 */ @font-face { /* 指定字体名称 */ font-family: 'Bungee Inline'; font-style: normal; font-weight: 400; /* 指定字体文件的路径 */ src: local('Bungee Inline'), local('BungeeInline-Regular'), url(https://fonts.gstatic.com/s/bungeeinline/v2/Tb-1914q4rFpjT-F66PLCfn8qdNnd5eCmWXua5W-n7c.woff) format('woff'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; } /* 字体的应用 */ h2{ font-family: 'Bungee Inline'; } </style> <h2>Lecepin's Blog </h2> 效果: 代码块中,
src format属性兼容写法 关于兼容各个浏览器的兼容写法,可以参考一下一个国外大神Paul Irish写的兼容代码: @font-face { font-family: '字体名'; src: url('字体名.eot'); /* IE9 兼容模式 */ src: url('字体名.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('字体名.woff') format('woff'), /* 现代浏览器 */ url('字体名.ttf') format('truetype'), /* Safari, Android, iOS */ url('字体名.svg#grablau') format('svg'); /* Legacy iOS */ } 通常来说,有
字体格式转换工具 当你只有一种字体格式文件的时候,可以使用如下在线格式转换工具,生成其它格式字体文件:
8、font-size-adjustCSS 中的 在这里,你不仅能了解到 font-size-adjust 的重要性 你访问的网站大多都是由文本组成的,由于书面文字是网站的重要组成部分,因此就很值得把注意力放到你用来显示信息的字体上面。选对正确的字体能带给用户愉快的阅读体验,然而,使用不恰当的字体则会使网站变得难以阅读。当你决定将要使用什么字体后,一般你就会再给这个字体选择一个合适的大小。
举个例子,看下面的代码: body { font-family: 'Lato', Verdana, sans-serif; } 如果你的浏览器从 Google Fonts 下载的 ‘Lato’ 字体不可用时,在这种情况下,Verdana 字体就会被使用。但是,脑海里 什么是字体的纵横比? 字体的外观尺寸及其可读性可能会因为 正如我之前说的,一旦你设置了
给 font-size-adjust 属性选择合适的值 现在你知道使用 font-size-adjust: none | <number>
你也可以设置属性的值为一个数字,这个数字将用来计算一张网页上所有字体的 x 轴高度,x 轴高度等于这个数字乘以 font-size: 20px;font-size-adjust: 0.6; 所有字体的 x 轴高度现在是 20px * 0.6 = 12px,一种字体的实际大小现在可以被修改以确保 x 轴高度总是等于 12px。调整后 c = ( a / a' ) s. 这里, 你不能设置 大多数情况下,开发者一般会尝试不同的 如何计算一种字体的纵横比 要确定一种字体合适的纵横比,你可以凭实际经验就是调整后的字体大小应该跟原来声明的字体大小一样。这就是说上面公式中的 计算纵横比的第一步是先创建 2 个 在下面的 demo 中,我创建了一个边框围绕着字母 ‘t’ 和 ‘b’ 并且对每组字母应用了不同的 以下是相关代码: .adjusted-a { font-size-adjust: 0.4; } .adjusted-b { font-size-adjust: 0.495; } .adjusted-c { font-size-adjust: 0.6; } 正如下面 demo 所示,
在网站上使用 font-size-adjust 以下 demo 使用的
当你处理大量文字时效果会更加引人注目,然而上面的例子应该足够让你认识到这个属性的有用之处。 浏览器支持 目前,只有 Firefox 默认支持 如果你决定使用这个属性,低版本浏览器的支持将不成问题,这个属性被设计时就已经考虑到向后兼容性,不支持的浏览器会正常的显示文本,支持的浏览器则会基于该属性的值调整字体大小。 9、font-stretchfont-stretch属性用来将字体在水平方向上进行拉伸或压缩,让一种字体的字符更宽或更窄。如果水平压缩,则字体变窄,如果水平拉伸,则字体变宽。 语法格式: font-stretch: wider|narrower|ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|inherit;
就像 font-size 属性的预定义关键字(如xx-large)一样,该属性也有一系列预定义关键字,这些关键字可以是normal、或condensed、或expanded,默认值为 normal,表示不进行拉伸或压缩。 示例: /* Keyword values */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: normal; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded; /* Global values */ font-stretch: inherit; font-stretch: initial; font-stretch: unset; 该属性不会通过伸缩缩小任意字体的几何形状。像 注意:如果字体提供了多个面, 如果字体没有浓缩或扩展,如Mac OS上的默认“Times New Roman”, (学习视频分享:web前端入门) |
The above is the detailed content of What are the commonly used font attributes in css? Detailed explanation of font properties. For more information, please follow other related articles on the PHP Chinese website!