css - 字体

时间  2021-08-14
标签 javascript css html java web 浏览器 服务器 markdown svg 函数 栏目 CSS 繁體版
原文   原文链接

这是我参与更文挑战的第15天，活动详情查看： 更文挑战javascript

工做比较忙，为了避免断更，只能发之前的了。css

通用字体系列

Serif字体

字体成比例，并且有上下短线。若是字体中的全部字符根据其不一样大小有不一样的宽度，则称为字体是成比例的。例如：小写的i和m的宽度就不一样。上下短线指的是每一个字符笔画末端的装饰，如大写两条腿底部的短线。包括Times\Georgia\New century Schoolbook。
html

sans-serif字体

字体成比例，且没有上下短线(无衬线字体)，包括Helvetica\Geneva\Verdana\Arial\Univers
java

Monospace字体

字体不成比例，等宽字体，包括Courier\Courier New\Andale Mono
web

Cursive字体

手写体，包括Zapf Chancery\Author\Comic Sans
浏览器

Fantasy字体

没法归类的字体，包括Western\Woodblock\Klingon
服务器

请看示例：markdown

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style> html { width: 100%; height: 100%; font-size: 20px; } div { margin: 20px; background-color: gray; } .serif { font-family: "Times"; } .sans-serif { font-family: "Arial"; } .Monospace { font-family: "Courier"; } .Cursive { font-family: "Comic Sans"; } .Fantasy { font-family: "Western"; } </style>
    </head>  
    <body>  
        <div class='serif'>serif字体: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='sans-serif'>sans-serif字体: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='Monospace'>Monospace字体: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='Cursive'>Cursive字体: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
        <div class='Fantasy'>Fantasy字体: y l A<font style="background-color: red">i</font><font style="background-color: yellow">m</font></div>
    </body>  
</html>   
复制代码

image.png
这里只介绍CSS 字体
serif字体，能够看到字母A是具备上下短线的，并且字母i和m的宽度不等，因此字体成比例。
svg

​

使用字体

font-family：[ <family-name> | <generic-family> ] #
复制代码
  • = arial | georgia | verdana | helvetica | simsun and etc.
  • = cursive | fantasy | monospace | serif | sans-serif
  • 若是多个字体，则会首先匹配第一个字体。识别不到，才会识别第二个
  • 字体为多个单词，则须要用引号将单词包含起来
  • 若是只想使用某一个通用字体，可是不关心具体的字体名称，能够直接使用通用字体名称，如serif
    ​

中文字体

字体中文名 字体英文名
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft Yahei
微软正黑体 Microsoft JhengHei
楷体 KaiTi
新宋体 NSimSun
仿宋 FangSong
更多详情访问文章
​函数

字体加粗

font-weight：normal | bold | bolder | lighter | <integer>
复制代码

取值：

  • normal：正常的字体。至关于数字值400
  • bold：粗体。至关于数字值700。
  • bolder：定义比继承值更重的值
  • lighter：定义比继承值更轻的值
  • <integer>：用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

​

解释bolder

首先咱们会获得从父元素继承而来的font-weight。当子元素设置成bolder的时候。会有一种规则(测试而来)：以下，

  • 100 | 200 | 300 -> normal (400)
  • normal (400) | 500 | 600 -> bold (700)
  • bold (700) | 800 | x > 900 -> 900

​

  • 当父元素的font-weight为100 | 200 | 300，子元素的bolder都会跳到400。
  • 当父元素的font-weight为normal (400) | 500 | 600，子元素的bolder都会跳到bold (700)。
  • 当父元素的font-weight为bold (700) | 800 | x > 900，子元素的bolder都会跳到900。
.parent1 {
    font-weight: normal; /*400*/
}
 
.child1 {
    font-weight: bolder; /*700*/
}
 
 
.parent2 {
    font-weight: normal; /*100*/
}
 
.child2 {
    font-weight: bolder; /*400*/
}
 
 
.parent3 {
    font-weight: normal; /*700*/
}
 
.child3 {
    font-weight: bolder; /*900*/
}
复制代码

image.png

解释lighter

首先咱们会获得从父元素继承而来的font-weight。当子元素设置成lighter的时候。会有一种规则(测试而来)：以下

  • 500 | 400 | 300 | 200 | 100 -> 100
  • 700 | 600 -> normal (400)
  • 900 | 800 -> bold (700)
  • x > 900 -> (chorme: 400), (IE, firefox : 100)

​

字体大小

font-size：<absolute-size> | <relative-size> | <length> | <percentage>
复制代码
  • <absolute-size>= xx-small | x-small | small | medium | large | x-large | xx-large
  • <relative-size>= smaller | larger
<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style> html { width: 100%; height: 100%; } .xx-small { font-size: xx-small; } .x-small { font-size: x-small; } .small { font-size: small; } .medium { font-size: medium ; } .large { font-size: large ; } .x-large { font-size: x-large; } .xx-large { font-size: xx-large; } </style>
    </head>  
    <body>  
        <div>
            normal text
        </div>
        <div class="xx-small">
            xx-small text
        </div>
        <div class="x-small">
            x-small text
        </div>
        <div class="small">
            small text
        </div>
        <div class="medium">
            medium text
        </div>
        <div class="large">
            large text
        </div>
        <div class="x-large">
            xlarge text
        </div>
        <div class="xx-large">
            xx-large text
        </div>
    </body>  
</html>   
复制代码


测试结果：

​

测试larger

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style> html { width: 100%; height: 100%; } .child { font-size: larger; } .xx-small { font-size: xx-small; } .x-small { font-size: x-small; } .small { font-size: small; } .medium { font-size: medium ; } .large { font-size: large ; } .x-large { font-size: x-large; } .xx-large { font-size: xx-large; } </style>
    </head>  
    <body>  
        <div class="xx-small">
            <div class="child">
                xx-small parent
            </div>
        </div>
        <div class="x-small">
            <div class="child">
                x-small parent
            </div>
        </div>
        <div class="small">
            <div class="child">
                small parent
            </div>
        </div>
        <div class="medium">
            <div class="child">
                medium parent
            </div>
        </div>
        <div class="large">
           <div class="child">
                large parent
            </div>
        </div>
        <div class="x-large">
            <div class="child">
                x-large parent
            </div>
        </div>
        <div class="xx-large">
            <div class="child">
                xx-large parent
            </div>
        </div>
    </body>  
</html>   
复制代码

image.png

​

测试smaller

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style> html { width: 100%; height: 100%; } .child { font-size: smaller; } .xx-small { font-size: xx-small; } .x-small { font-size: x-small; } .small { font-size: small; } .medium { font-size: medium ; } .large { font-size: large ; } .x-large { font-size: x-large; } .xx-large { font-size: xx-large; } </style>
    </head>  
    <body>  
        <div class="xx-small">
            <div class="child">
                xx-small parent
            </div>
        </div>
        <div class="x-small">
            <div class="child">
                x-small parent
            </div>
        </div>
        <div class="small">
            <div class="child">
                small parent
            </div>
        </div>
        <div class="medium">
            <div class="child">
                medium parent
            </div>
        </div>
        <div class="large">
           <div class="child">
                large parent
            </div>
        </div>
        <div class="x-large">
            <div class="child">
                x-large parent
            </div>
        </div>
        <div class="xx-large">
            <div class="child">
                xx-large parent
            </div>
        </div>
    </body>  
</html>   
复制代码


​

字体风格

  • normal：指定文本字体样式为正常的字体
  • italic：指定文本字体样式为斜体。对于没有设计斜体的特殊字体，若是要使用斜体外观将应用oblique
  • oblique：指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字
.italic {
    font-style: italic;
}
 
.oblique {
    font-style: oblique;
}
复制代码

​

字体变形

font-variant：normal | small-caps
复制代码
  • normal：正常的字体
  • small-caps：小型的大写字母字体，若是文本源中出现大写字母，则会显示正常的大写字母
<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css"> .normal { font-variant: normal; } .small-caps { font-variant: small-caps; } </style>
    </head>  
    <body>  
        <div class="normal">
            NORMAL 文字
        </div>
 
        <div class="small-caps">
            LARGE WORDS small-caps 文字
        </div>
    </body>  
</html>
复制代码

image.pngimage.png
​
​

字体拉伸和调整（了解，几乎全部的浏览器不支持）

字体拉伸

font-stretch：normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
复制代码
  • normal：正常文字宽度
  • ultra-condensed：比正常文字宽度窄4个基数。
  • extra-condensed：比正常文字宽度窄3个基数。
  • condensed：比正常文字宽度窄2个基数。
  • semi-condensed：比正常文字宽度窄1个基数。
  • semi-expanded：比正常文字宽度宽1个基数。
  • expanded：比正常文字宽度宽2个基数。
  • extra-expanded：比正常文字宽度宽3个基数。
  • ultra-expanded：比正常文字宽度宽4个基数。

​

字体调整

font-size-adjust：none | <number>	
复制代码
  • none：不保留首选字体的 x-height
  • <number>定义字体的 aspect 值**

​

复合属性font

font：[ [ <' font-style '> || <' font-variant '> || <' font-weight '> ]? <' font-size '> [ / <' line-height '> ]? <' font-family '> ] | caption | icon | menu | message-box | small-caption | status-bar	 
复制代码
  • <' font-style '>：指定文本字体样式
  • <' font-variant '>：指定文本是否为小型的大写字母
  • <' font-weight '>：指定文本字体的粗细
  • <' font-size '>：指定文本字体尺寸
  • <' line-height '>：指定文本字体的行高
  • <' font-family '>：指定文本使用某个字体或字体序列
  • caption：使用有标题的系统控件的文本字体（如按钮，菜单等）（CSS2）
  • icon：使用图标标签的字体（CSS2）
  • menu：使用菜单的字体（CSS2）
  • message-box：使用信息对话框的文本字体（CSS2）
  • small-caption：使用小控件的字体（CSS2）
  • status-bar：使用窗口状态栏的字体（CSS2）

​

@font-face

在 CSS3 以前，web 设计师必须使用已在用户计算机上安装好的字体。经过 CSS3，web 设计师可使用他们喜欢的任意字体。

当找到或购买到但愿使用的字体时，可将该字体文件存放到 web 服务器上，它会在须要时被自动下载到用户的计算机上。字体是在 CSS3 @font-face 规则中定义的。可是若是咱们下载的字体太大，会存在性能问题，不过好在如今的字体服务商给的文件都不大。

@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
    [unicode-range： <unicode-range>];
}
复制代码
  • YourWebFontName：指的就是自定义的字体名称，最好是使用你下载的默认字体，它将被引用到你的Web元素中的font-family。如“font-family:”字体名”;”
  • Source：指的是自定义的字体的存放路径，能够是相对路径也能够是绝路径；
  • Format：指的是自定义的字体的格式，主要用来帮助浏览器识别，其值主要有如下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；
  • weight和style: weight定义字体是否为粗体，style主要定义字体样式，如斜体。
  • unicode-range: 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

​

(1) 使用font-face自定义字体

@font-face {
    font-family: YourWebFontName;
    src: url(../font/test.eot);
    src: url(../font/test.eot?#iefix) format("embedded-opentype"),
         url(../font/test.woff) format("woff"), 
         url(../font/test.ttf) format("truetype"),
         url(../font/test.svg#jq) format("svg");
}
复制代码

​

(2) 声明字体来源

@font-face规则中有一个很是重要的参数，就是src。其值主要是用于链接到实际的字体文件。此外，能够声明多个来源，若是浏览器未能找到第一个来源，他回一次寸照下面的字体来源。
上面声明了四中字体：EOT, WOFF, TTF和SVG。

  • TureTpe(.ttf)格式
    .ttf字体是Windows和Mac的最多见的字体，是一种RAW格式，所以他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
  • OpenType(.otf)格式
    .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，因此也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
  • Web Open Font Format(.woff)格式
    .woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
  • **Embedded Open Type(.eot)格式 **
    .eot字体是IE专用字体，能够从TrueType建立此格式字体,支持这种字体的浏览器有【IE4+】；
  • **SVG(.svg)格式 **
    .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

​

(3) 建立各类字体

这里以国内的网站有字库为例。

而后获得对应的font-face代码：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style type="text/css"> @font-face { font-family: 'ChannelSlanted2'; src: url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.gif?r=76000373532'); src: url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.gif?r=76000373532?#iefix') format('embedded-opentype'), url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.png?r=76000373532') format('woff2'), url('http://cdn.webfont.youziku.com/webfonts/nomal/118923/45817/5b0d6df4f629d91b10cd3bc2.bmp?r=76000373532') format('woff'); font-weight: normal; font-style: normal; } .ChannelSlanted2 { font-family: "ChannelSlanted2" } </style>
    </head>  
    <body>  
        <div class="ChannelSlanted2">
            LARGE WORDS small-caps 文字
        </div>
    </body>  
</html>   
复制代码

而后获得咱们的图字效果。
image.png
还能够到网站（www.fontsquirrel.com/）去下载一些字体的格式。而后若是咱们的到只是其中一种格式的话，由于前面给出的网站下载的都是.otf格式，因此咱们还须要转换成其余格式。可使用下面的网站进行格式转换。

​

(4) 延伸：@font-face使用本地字符

@font-face 规则中的src 描述符还能够接受local()函数，用于指定本地字体的名称。当不须要用到任何外部的Web 字体，就能够直接在字体队列中指定一款本地字体：

@font-face {
	font-family: Ampersand;
	src: local('Baskerville'),
	local('Goudy Old Style'),
	local('Garamond'),
	local('Palatino');
}
复制代码

举例：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title>Document</title>  
        <style> @font-face { font-family: Ampersand; src: local('Comic Sans MS'); } .icon { font-family: Ampersand } </style>
    </head>  
    <body>  
        <div class="icon">
            HTML & CSS
        </div>
    </body>  
</html> 
复制代码

image.png

​

(5) 延伸：unicode-range控制字体应用范围

当咱们想要控制字符应用的范围，须要一个描述符来声明咱们想用这几款本地字体来显示哪些字符。

unicode-range 描述符只在@font-face 规则内部生效（所以这里用了描述符这个术语；它并非一个CSS 属性），它能够把字体做用的字符范围限制在一个子集内。它对本地字体和远程字体都是有效

这个unicode-range 在实践中很是实用，但在语法上却很是晦涩。它的语法是基于“Unicode 码位”的，而不是基于字符的字面形态。

例如：咱们想是上面的示例中HTML & CSS中的&应用字体，其余的不变化。

1) 在控制台执行下面代码获得十六进制码位

"&".charCodeAt(0).toString(16); // 返回26
复制代码

2) 造成unicode-range代码

须要在码位前面加上U+ 做为前缀

unicode-range: U+26; 
复制代码

*若是你想指定一个字符区间，仍是要加上U+ 前缀，好比U+400-4FF。实际上对于这个区间来讲，你还可使用通配符，以这样的方式来写：U+4??。同时指定多个字符或多个区间也是容许的，把它们用逗号隔开便可，好比U+26, U+4??, U+2665-2670。

3) 修改代码以下

<!DOCTYPE html>  
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @font-face { font-family: Ampersand; src: local('Comic Sans MS'); unicode-range: U+26; } .icon { font-family: Ampersand } </style> </head> <body> <div class="icon"> HTML & CSS </div> </body> </html> 复制代码

而后咱们看一下如今的样式以及和以前的样式对比（红色的是带有unicode-range的html，能够看到当前只有&仍是和以前相同，其余的不在应用Ampersand字体）：
image.png

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程