> 웹 프론트엔드 > HTML 튜토리얼 > CSS 字体 - 竹间

CSS 字体 - 竹间

WBOY
풀어 주다: 2016-05-20 13:46:27
원래의
1346명이 탐색했습니다.

1.font-family

不限长度的字体列表,字体包含空格须用引号包含如:"Times Now Roman"

通用字体族(所有操作系统都可用,作为备用字体放在列表末尾)

通用字体 包含的相关字体
serif Times, Times New Roman

sans-serif

(sans指无额外装饰,比serif更易阅读)

Arial, Helvetica
monospace Courier, Courier New

 

 

 

 

 

 

2.font-size

不指定时,浏览器默认为16px(=1em)

在所有浏览器显示相同文本大小并允许缩放的解决方案——百分比+em:

<span style="color: #008080;">1</span> <span style="color: #800000;">body</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 100%</span>;}
<span style="color: #008080;">2</span> <span style="color: #800000;">h1</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 2.5em</span>;}
<span style="color: #008080;">3</span> <span style="color: #800000;">h2</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 1.875em</span>;}
<span style="color: #008080;">4</span> <span style="color: #800000;">p</span>{<span style="color: #ff0000;">font-size</span>:<span style="color: #0000ff;"> 0.875em</span>;}
로그인 후 복사

3.font-style: normal/italic/oblique

当所用字体无斜体样式时,Safair使用默认字体,IE忽略该样式使用原字体。

4.font-weight:normal / bold

5.font-variant: normal / small-caps(小型大写字母)

 

简写:    font:font-size, font-family [其他可选]   / line-height


 

CSS3.0服务器端字体——@font-face——IE9及以上支持

<span style="color: #008080;">1</span> <span style="color: #800000;">@font-face</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    font-family</span>:<span style="color: #0000ff;">WebFont</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    src</span>:<span style="color: #0000ff;"> url('Fontin_Sans_R_45b.otf')  format("opentype")</span>;/*字体文件路径和字体文件格式*/
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    font-weight</span>:<span style="color: #0000ff;"> normal</span>;  
<span style="color: #008080;">5</span> }
<span style="color: #008080;">6</span> <span style="color: #800000;">h1</span>{
<span style="color: #008080;">7</span> <span style="color: #ff0000;">    font-family</span>:<span style="color: #0000ff;"> WebFont</span>;    
<span style="color: #008080;">8</span> }
로그인 후 복사
<span style="color: #008080;">1</span> <span style="color: #800000;">@font-face</span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    font-family</span>:<span style="color: #0000ff;"> Helvetica</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    src</span>:<span style="color: #0000ff;"> local("Helvetica Neue") , url('服务器端字体')</span>; /*先搜索本地字体,再搜索服务器上的字体*/
<span style="color: #008080;">4</span> }
로그인 후 복사

 

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿