5-2 文字编排 -- 漂亮的&字符

知识储备

1.@font-face ：{属性: 取值;}

font-family：设置文本的字体名称。
font-style：设置文本样式。
font-variant：设置文本是否大小写。
font-weight：设置文本的粗细。
font-stretch：设置文本是否横向的拉伸变形。
font-size：设置文本字体大小。
src：设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。

Tips:@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体

小测试

这一小节主要目的：
1.练习自定义字体
2.为特定字符添加字体样式

先来看看我们的效果吧！

Pretty & character

示例代码：
html

<h1> 
  HTML 
  <span class="amp">&amp;</span>
  CSS
</h1>

我们先看看原来的字体：

普通的字体

css

@font-face{   
  font-family: Ampersand; 
  src: url('GARAIT.TTF'); 
  unicode-range: U+26; 
  /*font-style: italic;*/
}

h1{  
  font-size: 6em; 
  font-family: Ampersand, Helvetica, sans-serif;
}

稍做讲解，自定义字体的声明（可以是本地的字体）

@font-face{
    font-family:自定义字体名称;
    src:自定义字体url;
    font-style：自定义字体风格（粗体/斜体...）;
}

然后在需要的文本区域添加

font-family:自定义字体名称，备用字体，....;

于是乎，成了下面这样子

自定义字体

---

但是，我们并不需要所有的文字都设置这种字体
于是这里有一点黑科技（只是我在看书前并不知道）：

unicode-range: U+26;

具体这个26怎么获取，可以在控制台里输入JS代码来获取

'&'.charCodeAt(0).toString(16);

返回16进制。在它的前面加'U+',便可以制定一个字元了！

如果想指定某个区间的字元，还可以用下面的几种方式：
U+400-4FF
U+4??
...

看看最后的效果！