Khóa văn bản - Thủ thuật CSS

 The Cat in the Hat

SVG cung cấp thẻ. Mặc dù nó hoạt động rất giống một chức năng bình thường trong HTML, nhưng nó chấp nhận các thuộc tính giúp mở khóa khả năng định hình văn bản mạnh mẽ.

Một trong những thuộc tính đó là textLength. Nếu chúng tôi đặt giá trị này thành 100, thì văn bản được bao bọc trong sẽ bị ép đến toàn bộ chiều dài của vùng chứa SVG.

Xem Pen SVG Text Lockup - Step 1 by Geoff Graham (@geoffgraham) trên CodePen.

Một trong những thuộc tính đó là lengthAdjust. Điều này chỉ áp dụng khi (hoặc ) có một tập hợp textLengthvà xử lý theo cách văn bản được mở rộng hoặc nén để vừa với không gian đó. Giá trị mặc định là giá trị spacinggiữ nguyên các hình dạng chữ cái nhưng điều chỉnh khoảng cách giữa các ký tự. Chúng ta có thể sử dụng spacingAndGlyphsthay thế và điều đó sẽ điều chỉnh mở rộng nén hình dạng của các ký tự cũng như khi khoảng cách tự nhiên không hợp lý.

Xem Pen SVG Text Lockup - Step 2 by Geoff Graham (@geoffgraham) trên CodePen.

Giống như , thẻ cũng chấp nhận một font-sizethuộc tính thực hiện chính xác như bạn có thể mong đợi: thay đổi kích thước của văn bản. Chúng ta có thể sử dụng điều đó để thực hiện các điều chỉnh đối với văn bản, nơi việc tăng lên textLengthđể lại quá nhiều hoặc quá ít không gian và lengthAdjustlàm cong các ký tự ra ngoài.

Kết hợp với nhau, ba thuộc tính này cho chúng ta khả năng tạo khóa văn bản. Đây là kết quả của đoạn mã trên với một số CSS bổ sung để tạo thêm kiểu dáng:

Xem Pen SVG Text Lockup của Geoff Graham (@geoffgraham) trên CodePen.

Các khóa khác

Chúng tôi đã viết về khóa loại trước đây:

Khóa kiểu là một thiết kế kiểu chữ trong đó các từ và ký tự được tạo kiểu và sắp xếp rất đặc biệt. Giống như thiết kế được khóa tại chỗ theo đúng nghĩa đen.

SVG hoàn hảo cho loại điều này, vì cách nó thay đổi kích thước. Văn bản bên trong SVG không chỉnh sửa lại như kiểu trong HTML, nó chia tỷ lệ theo cách riêng của SVG, thường ở tỷ lệ khung hình hoàn hảo mà nó được thiết kế (mặc dù bạn có thể kiểm soát điều đó).

Vì vậy, nếu bạn thiết kế một cái gì đó như thế này trong phần mềm chỉnh sửa vector như Adobe Illustrator: