Tùy chỉnh font chữ trong WordPress

Đáp ứng yêu cầu của chủ nhân Blog http://cafeandbooks.wordpress.com/ thì HMP làm bài viết này để giúp chị và những bạn nào có nhu cầu chỉnh sửa cỡ chữ, kiểu chữ trong bài viết.

Trước tiên cần nói đền giao diện soạn thảo của một bài viết, mà cụ thể là giao diện “HIỂN THỊ” và giao diện “VĂN BẢN”

Giao diện hiển thị

Mẹo WordPress - hiển thị

Giao diện văn bảnMẹo WordPress - văn bản

Khi thực hiện việc thay đổi đặc tính font chữ trong bài viết chúng ta sẽ thực hiện trên giao diện văn bản còn giao diện hiển thị sẽ chỉ có chức năng kiểm tra liệu những thay đổi có thành công.

Một lưu ý nhỏ cho tất cả các bạn, để tiện thao tác thì nên dùng word để soạn thảo trước, sau đó sẽ dán vào phần văn bản và chèn mã Code ở hai đầu văn bản.

1. Chỉnh cỡ chữ

Code mẫu: <span style="font-size: 100%;">XXX</span>

Ví dụ muốn viết dòng chữ Heo Mê Phim có cỡ chữ GẤP ĐÔI ta sẽ viết tại giao diện soạn văn bản như sau

<span style="font-size: 200%;">Heo Mê Phim</span>

Kết quả là:

Heo Mê Phim

2. Chỉnh Font chữ

Lưu ý để tiện nhất thì nên lấy những font chữ mặc định của windows:

Code mẫu:            <span style="font-family:TÊN FONT;">XXX</span>

Ví dụ muốn viết dòng chữ Heo Mê Phim bằng font Comic Sans MS ta dùng Code

<span style="font-family:Comic Sans MS;">Heo Mê Phim</span>

Kết quả là:

Heo Mê Phim

3. Hiện ký tự phía trên – Phía dưới.

Code mẫu:

  • Chèn trên: <sup>XXX</sup>
  • Chèn Dưới: <sub>XXX</sub>

Ví Dụ:PhimHeo Mê Phim             

Được thực hiện bởi code <sup>Heo Mê Phim</sup>

Hoặc: Phim Heo Mê Phim               

Được thực hiện bởi code <sub>Heo Mê Phim</sub>

4. Kết hợp Code

Trong trường hợp bạn muốn vừa sửa đổi kích thước, kiểu font, vị trí chèn kí tự thì hoàn toàn có thể kết hợp những code này với nhau.

Trước tiên hãy nhìn lại những Code vừa rồi

<span style="font-size: 200%;">Heo Mê Phim</span>
<span style="font-family:Comic Sans MS;">Heo Mê Phim</span>
<sup>Heo Mê Phim</sup>

Chúng bao gồm 2 thành phần chính: Nội dung của các ký tự và code. Để kết hợp những Code trên ta chỉ cần copy và dán chúng.

<sup><span style="font-size: 200%;"><span style="font-family:Comic Sans MS;">Heo Mê Phim</span></span></sup>

Hoặc:

<span style="font-size: 200%;"><span style="font-family:Comic Sans MS;"><sup>Heo Mê Phim</sup></span></span>

Hoặc:

<span style="font-size: 200%;"><sup><span style="font-family:Comic Sans MS;">Heo Mê Phim</span></sup></span>

Chúng đều cho ta chung một kết quả là

PhimHeo Mê Phim

Tổng quát lại là: những phần đầu và phần đuôi của một code phải đối xứng với nhau.

5. Áp dụng Code cho toàn bộ nội dung bài viết

Trong trường hợp bạn muốn thay đổi thuộc tính font chữ của toàn bộ bài viết chứ không phải chỉ có một hai đoạn, bạn chỉ cần soạn toàn bộ nội dung của bài viết ở giao diện Hiển thị hoặc giao diện Văn bản đều được. Việc tinh chỉnh sẽ được thực hiện ở giao diện Văn bản. Bạn chỉ cần dán phần TIỀN TỐ của Code vào trước phần nội dung của bài viết đó.

Ví dụ như bạn có thể soạn Code

<span style="font-size: 200%;">Đây là toàn bộ văn bản

Chứ không nhất thiết phải soạn

<span style="font-size: 200%;">Đây là toàn bộ văn bản</span>

Kết quả của hai đoạn Code này đều giống nhau là
Đây là toàn bộ văn bản

Phân tích đoạn Code

<span style="font-size: 200%;">Đây là toàn bộ văn bản</span>

Ta có thể thấy đoạn <span style=”font-size: 200%;”> chính là phần code mang thông tin định dạng font chữ còn </span> chỉ mang ý nghĩa là kết thúc phần văn bản được định dạng.

Vậy nên thay vì cứ phải chèn Code cho từng đoạn kiểu như

<span style="font-size: 200%;">Heo Mê Phim</span>
<span style="font-size: 200%;">Đây là Blog chuyên về phim ảnh</span>

Thì bạn hoàn toàn có thể đơn giản chúng thành

<span style="font-size: 200%;">Heo Mê Phim
Đây là Blog chuyên về phim ảnh

Chúng đều có kết quả chung là
Heo Mê Phim
Đây là Blog chuyên về phim ảnh

Bài viết liên quan: Mẹo WordPress

16 thoughts on “Tùy chỉnh font chữ trong WordPress

  1. 1. Cám ơn em rất nhiều. Bài hướng dẫn ngắn gọn và dễ thực hiện quá. Cho phép chị bê nguyên bài này về blog để dành nhé?

    2. Có vấn đề xảy ra khi áp dụng:

    – chị đã thử chỉnh sửa size ở giao diện văn bản một đoạn như thế này:

    “… Trong mỗi chúng ta đều có một cái gì mà dù có gào khóc thế nào đi nữa ta cũng không vượt qua được nó. Chúng ta là như thế và không làm thế nào được. Như con chim nọ trong một truyền thuyết cổ của dân tộc Celtic: lao ngực vào chiếc gai của bụi mận, và khi trái tim bị xuyên thủng thì cất tiếng hót và chết dần…”

    Trích “Tiếng chim hót trong bụi mận gai” của nhà văn Colleen McCulough.

    nhưng sau khi bấm “Lưu” ở lần đầu tiên hoặc “Cập nhật” ở lần sửa lại thì văn bản tự động bị mất code, chỉ còn thế này:

    “… Trong mỗi chúng ta đều có một cái gì mà dù có gào khóc thế nào đi nữa ta cũng không vượt qua được nó. Chúng ta là như thế và không làm thế nào được. Như con chim nọ trong một truyền thuyết cổ của dân tộc Celtic: lao ngực vào chiếc gai của bụi mận, và khi trái tim bị xuyên thủng thì cất tiếng hót và chết dần…”

    Trích “Tiếng chim hót trong bụi mận gai” của nhà văn Colleen McCulough.

    –> Kết quả là size chữ không tăng lên 150% như chị mong muốn.

    Chị đã thử đi thử lại vài lần, nhưng lần nào bấm lưu/cập nhật xong cũng mất code y như vậy. HMP ơi, thế lỗi là ở đâu? Làm sao chỉnh sửa hả em?

    Số lượt thích

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s