HTML基礎-05

時間 2020-07-25

標籤 html 基礎欄目 HTML 简体版

原文原文鏈接

字體css

文本顏色：color:red;
字體分類：
　　襯線字體serif
　　　　--字體寬度各異，有襯線
　　　　--Times、Georgia、宋體
　　無襯線字體sans-serif
　　　　--字體寬度各異，無襯線
　　　　--Helvetica、Verdana、Arial、微軟雅黑
　　等寬字體monospace
　　　　--字體寬度同樣，通常用於代碼或表格
　　　　--Courier New、Consolas
　　草書字體cursive
　　　　--模仿人手寫的字體
　　　　--Indie Flower、Comic Sans
　　裝飾字體Fantasy
　　　　沒有什麼統一特徵，不屬於上述類別的字體
字體族：使用font-family來設置字體族
　　　　　　font-family:sans-serif;
　　能夠同時指定多個字體，多個字體之間使用逗號隔開（若字體之間有空格或者特殊符號，使用引號）
　　　　　　font-family:sans-serif，」Microsoft YaHei」;

@font-face：字體本機有，其餘人沒有，用戶可下載
　　經過@font-face能夠使瀏覽器自動應用服務器上的字體文件
　　　　@font-face{
　　　　　　　　　　font-family:’myFont’;
　　　　　　　　　　Src:url(‘./ZCOOLXW-R.ttf’)}
注：有些字體有版權，不建議使用

圖標字體：font-awesome.css
　　　1. 使用步驟：將css和fonts文件夾放到項目目錄html

　　　引入CSS文件<link rel=’stylesheet’ href=’css/font-awesome.min.css’>web

　　　　<body>
　　　　　　<span class="fa fa-power-off s1"></span>
　　　　</body>瀏覽器

　　　　<style>服務器

　　　　　　.s1{font-size:120px;oop

　　　　　　color:red;}字體

　　　　</style>url

　　2. 將文件css和webfonts放在fa文件夾中spa

<link rel="stylesheet" href="fa/css/all.css">
pwa

使用時：<i class="fas fa-stroopwafel" style="font-size: 100px;"></i>

阿里圖標字體：http://www.iconfont.cn

選中想要的圖標加入購物車，且添加到項目中，下載到本地，放入iconfont中，引入iconfont/iconfont.css

三種方法

　　 1.經過實體<span class=’iconfont’ style=’font-size:100px;color:red;’></span>

　　2.經過類<span class=’iconfont icon-icon-test’ style =’ font-size:100px;color:red; ’> </span>

　　3.經過僞類<p></p >

　　　　<style>

　　　　　　p::before{

　　　　　　　　content:’\e63f’

　　　　　　　　font-family:iconfont;

　　　　　　　　font-size:100px;}

　　　　</style>

字體大小

1em=1font-size：em也是CSS中的一個單位，至關於一個字體大小

1rem=HTML的1font-size,默認16px，相對於根元素

修改：html{font-size:200px;}

行高（line height）

行高指的是文字佔有的實際高度。經過line-height來設置行高，行高能夠指定一個大小（px,em），也能夠直接設置整數（整數表明行高是字體的指定倍數）

爲了使得文字垂直居中：行高設置和高度同樣 line-height=height;

行高還能夠設置文字的行間距：行間距=行高-字體大小

字體框：字體存在的格子，設置font-size實際上就是設置字體框的高度。

行高會在字體框的上下平均分配。

字體的簡寫屬性

font同時設置字體相關的全部樣式，後面必須是字體大小和字體族，必須寫（空格隔開）

font:40px ‘Times New Roman ’，Times

font:[加粗斜體變形]大小/行高字體族

行高 能夠省略不寫，若是不寫使用默認值

字重，字體加粗：font-weight:100-900;九個級別，但基本上沒有用

可選值：normal 默認值，不加粗

bold 加粗

字體樣式：font-style

可選值：normal 默認值，正常

italic 斜體

字體變形：font-variant

可選值：small-caps（小型大寫字母）

文本樣式

text-align：設置文本的對齊方式

left 默認值，靠左對齊

right 靠右對齊

center 居中對齊

justify 兩端對齊

vertical-align：垂直對齊方式

baseline:基線對齊

top:和父元素頂部對齊

bottom:和父元素的底部對齊可設置圖片對齊，使其不向基線對齊

super：上標

sub：下標

middle:居中

text-decoration：設置文本修飾

underline：下劃線

line-through:刪除線

overline:上劃線

none:沒有線

white-space:如何處理空白內容

normal 默認值，自動換行

nowrap 不換行

pre 保留文本的格式

text-overflow: 如何處理溢出的文本

ellipsis 使用省略號來表示溢出的內容

相關文章

相關標籤/搜索

Python基礎 05

NodeJs基礎篇

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<