BlockMeet 設計系統
返回應用文字排版
BlockMeet 文字排版指南，確保整個平台上的文字呈現一致且易於閱讀。
字體家族
BlockMeet 使用系統原生字體堆疊，確保最佳性能和在所有設備上的一致性。
主要字體
用於大多數界面文字，包括段落、標籤等
中文排版示範文字 Aa Bb Cc 123
font-sans等寬字體
用於程式碼塊、代碼等
const message = 'Hello, BlockMeet!'; // 程式碼示範
font-mono文字大小
使用一致的文字大小階層來創建視覺層次感。
text-xs超小字體 (0.75rem / 12px) - 用於次要信息、註腳
text-sm小字體 (0.875rem / 14px) - 用於輔助文字、說明
text-base基本字體 (1rem / 16px) - 用於正文內容
text-lg大字體 (1.125rem / 18px) - 用於重點內容
text-xl特大字體 (1.25rem / 20px) - 用於小標題
text-2xl2倍大字體 (1.5rem / 24px) - 用於二級標題
text-3xl3倍大字體 (1.875rem / 30px) - 用於一級標題
text-4xl4倍大字體 (2.25rem / 36px) - 用於頁面標題
text-5xl5倍大字體 (3rem / 48px) - 用於大型標語
字重
字重可以增強視覺層次並強調重要內容。
font-light text-xl輕量字重 (300) - 用於大型展示文字
font-normal text-xl正常字重 (400) - 用於大多數正文內容
font-medium text-xl中等字重 (500) - 用於稍微強調
font-semibold text-xl半粗字重 (600) - 用於按鈕和重要內容
font-bold text-xl粗體字重 (700) - 用於標題和強調
響應式排版
BlockMeet 的排版系統是響應式的，使用 Tailwind CSS 的響應式前綴 (sm:, md:, lg:, xl:, 2xl:) 來針對不同螢幕尺寸調整文字大小。
範例:
<h1 className="text-2xl md:text-3xl lg:text-4xl font-bold">響應式標題</h1>在小螢幕上標題將使用 text-2xl (1.5rem)，在中型螢幕上使用 text-3xl (1.875rem)，在大螢幕上使用 text-4xl (2.25rem)。
行高
適當的行高可以提高文字的可讀性。
leading-none (行高 1)
這是一段使用極小行高的文字。這種設置對於標題或需要緊湊排版的地方很有用。 但對於長段落來說可能會影響可讀性，因為行與行之間沒有足夠的空間。
leading-tight (行高 1.25)
這是一段使用較緊湊行高的文字。這種設置在需要節省空間但又不想完全犧牲可讀性的情況下很有用。 對於短段落或中型文字來說比較適合。
leading-normal (行高 1.5)
這是一段使用標準行高的文字。這是大多數正文內容的理想設置，提供了良好的可讀性和適當的空間。 大多數情況下，這應該是段落文字的默認選擇。
leading-relaxed (行高 1.75)
這是一段使用寬鬆行高的文字。當需要提高可讀性，特別是在較長的段落中，這種設置非常有效。 它為文字提供了充足的呼吸空間，減少視覺疲勞。
文字對齊
根據內容和設計需求選擇適當的文字對齊方式。
text-left (左對齊)
這是左對齊文字。這是西方語言和中文的默認設置，最適合大多數閱讀場景。 左對齊創造了一個一致的起點，使讀者的眼睛可以輕鬆地找到每行的開始。
text-center (居中對齊)
這是居中對齊文字。適用於標題、引用和短段落，可以創造一種正式或平衡的外觀。 但不建議用於長段落，因為會使閱讀變得困難。
text-right (右對齊)
這是右對齊文字。不常用於主要內容，但適合特定情況，如日期、時間標記，或在RTL語言中。 也可用於創造特殊的設計效果或視覺對比。
text-justify (兩端對齊)
這是兩端對齊文字。它創造了整齊的左右邊緣，但可能導致單詞間距不均。 在某些正式文檔中可能有用，但在網頁上應謹慎使用，尤其是在狹窄的容器中。