想看更多 Figma 教程、資源請訪問 Figma 中文網(wǎng)：https://figmacn.com

歡迎來到 Figma 教程。在這個教學(xué)視頻中，我們將一起學(xué)習(xí)文字工具和字體的基本使用。

在設(shè)計中文字樣式是十分重要的，你選擇的字體字號決定了你的設(shè)計的可讀性和獨特吸引力。你所設(shè)置的文字顏色、尺寸、間隔、寬度，都會向你的用戶傳達(dá)一些產(chǎn)品信息。

Figma 預(yù)先加載了很多谷歌字體，因此你可以直接快速開始設(shè)計。你可以前往 font.google.com 去預(yù)覽你喜歡的字體效果和樣式，或者通過篩選去發(fā)現(xiàn)一些新字體。

當(dāng)然，你也可以使用本地字體進行設(shè)計。不過如果你是用在線版的，則需要先下載并安裝 Figma 字體安裝器。你可以在個人設(shè)置頁面找到下載鏈接，這樣 Figma 就能識別到你本地所有字體了。

如果你用的是本地客戶端，就不需要下載字體安裝器了，可以直接使用本地字體。如果你在和別人一起協(xié)作時使用了本地字體，那么其他人也需要在本地安裝了這些字體，這樣才能使用那些字體。

還好有谷歌字體，那讓我們直接開始吧。我們可以在頂部的工具欄點擊文字工具，或者按下 T 來進入文字輸入模式。當(dāng)你處于文字輸入模式時，有兩種方式來創(chuàng)建文字圖層。

你可以在畫布中點擊并直接輸入，這樣就創(chuàng)建了一個寬度自適應(yīng)的文字圖層，你的文字圖層寬度會隨著文字內(nèi)容而變化。

第二種方式是點擊后拖動，這樣可以創(chuàng)建一個固定尺寸的文字圖層。由于我們指定了尺寸，所以這種方式創(chuàng)建的文字圖層是固定大小的。當(dāng)你輸入的文字過長時，它會在到達(dá)邊界時自動換行。如果文字向下超出了區(qū)域，它也不會自動擴大尺寸。

想要編輯已創(chuàng)建的文字圖層，雙擊它就可以了。你可以改變它的自適應(yīng)行為，比如設(shè)置為高度自動，這樣再增加文字時它的高度會自動增長，這些操作都可以在文字面板的高級菜單中找到。

我們還可以在文字面板對文字進行其它的一些屬性控制。首先我們可以點擊這個下拉菜單來切換字體，我們還可以點擊這塊區(qū)域直接輸入字體名稱。讓我們選擇 sans 字體，在下邊還有兩個選項：選擇文字字號或者設(shè)置文字加粗或斜體樣式。

Tips：如果輸入的是中文，字體一定要選中文字體才會顯示

讓我們把字號從 10 改為 8，選中字體框并按兩次向下鍵 ↓，或者按住 Alt 并在字號上拖動鼠標(biāo)。你還可以使用快捷鍵來更改文字樣式，按下 command+B 可以給文字加粗，按下 command+I 可以讓文字變斜體，按下 command+U 可以給文字加下劃線。

接下來我們設(shè)置行高，來調(diào)節(jié)每行文字之間的距離。它的默認(rèn)值是 100%，等于當(dāng)前字體的默認(rèn)行高，按住 Shift 同時按方向下(或上)鍵，我們可以以 10 為基本單位改變行高。

在行高右邊是字體間距設(shè)置，它改變的是文字之間的空間大小。如果我們要調(diào)整某幾個字符間距，可以選中它們進行調(diào)整。字間距的單位默認(rèn)是 0%，但我們可以在里面輸入 px(像素)，讓我們把它改為 2 px。

現(xiàn)在我們來看看段落間距和段落縮進。段落間距改變的是段落之間的距離，也就是文字圖層中由回車分隔的段落間距，讓我們把它設(shè)置為 10px。段落縮進是指每段首字母往后縮進，讓我們把它改為 5px。

我們還可以調(diào)整文字的水平和垂直對齊，來決定文字該如何排列。我們的水平對齊選項包括居右、居中、居左和兩邊對齊，垂直對齊選項有靠上、居中和靠下對齊。

你還可以使用文字面板以外的屬性來調(diào)節(jié)文字。如果你想調(diào)節(jié)文字的顏色、描邊和效果，可以直接點擊右邊的填充、描邊和效果屬性。讓我們把這個文字改為紅色，并且給它添加一像素的黑色描邊。最后，我們點擊效果給文字添加陰影。

最最后，讓我們再回顧一下：

?前往 font.google.com 去查找或發(fā)現(xiàn)字體?如果你使用在線版本請先下載字體安裝器來使用本地字體?文字自適應(yīng)有三個選項：寬度、高度和固定大小?輸入數(shù)字加 px 來更改行高和字符間距?調(diào)整文字的水平或垂直對齊方式

想看更多 Figma 教程、資源請訪問 Figma 中文網(wǎng)：https://figmacn.com

查看 Figma 中文網(wǎng)

總結(jié)

以上是生活随笔為你收集整理的div固定大小文字溢出自动缩小_Figma 教程 | 文字工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。