Trong những năm qua, chúng tôi chủ yếu tạo kiểu cho phông chữ theo kích thước hoặc màu sắc và chỉ gần đây chúng tôi mới có thể thêm bóng chữ bằng CSS3. Đôi khi chúng ta cần nhiều kiểu chữ hơn để có những phông chữ tuyệt đẹp hơn, nhưng sẽ rất phức tạp nếu tự mình tạo ra. Thay thế nó bằng hình ảnh vẫn không phải là một lựa chọn tốt.

Thêm hiệu ứng tuyệt đẹp với Google Webfont

Đây là một số tin tốt. Google Webfont đã giới thiệu một tính năng, cho phép chúng tôi áp dụng các kiểu phông chữ trang trí – mà không gặp rắc rối. Hiện tại có hơn 25 hiệu ứng phông chữ mà chúng tôi có thể áp dụng.

Để thêm hiệu ứng, chúng tôi chèn effect = bằng tên API hiệu ứng phông chữ trong biểu định kiểu Phông chữ Web của Google. Trong ví dụ sau, chúng tôi đã thêm hiệu ứng phông chữ ‘Nhiều bóng’, được chỉ định với nhiều bóng (tên API).

  <link href="//fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple" rel="stylesheet" type="text/css">
 

Sau đó, chúng ta chỉ cần thêm tên lớp để áp dụng hiệu ứng cho phông chữ. Tên lớp được chỉ định bằng font-effect- * theo tên API. Với ví dụ trên, tên lớp cho hiệu ứng Multiple Shadow sẽ là font-effect-shadow-multiple.

  <p >This is Awesome!</p>
 

Đây là cách hiệu ứng phông chữ Multiple Shadow trông.


Trong trường hợp bạn đang tự hỏi làm thế nào để đạt được hiệu ứng này, bạn có thể kiểm tra bảng định kiểu, bảng định kiểu sẽ hiển thị cho bạn quy tắc kiểu sau.

  .font-effect-shadow-multiple {
	text-shadow: .04em .04em 0 #fff,.08em .08em 0 #aaa;
	-webkit-text-shadow: .04em .04em 0 #fff, .08em .08em 0 #aaa;
}
 

Hiệu ứng nhiều bóng có được với CSS3 text-shadow, vì vậy hiệu ứng này sẽ chỉ được hiển thị trong Chrome, Firefox, Opera và Safari. Internet Explorer 9 (và các phiên bản trước đó) không hỗ trợ text-shadow, nhưng nó có quy tắc riêng để xác định bóng với Shadow Filter.

Thêm nhiều hiệu ứng phông chữ

Chúng tôi được phép thêm nhiều hiệu ứng vào biểu định kiểu. Trong ví dụ này, chúng tôi đã thêm ba hiệu ứng phông chữ cùng một lúc: Multiple Shadow, Emboss, 3D. Mỗi hiệu ứng được phân tách bằng ký hiệu đường ống |||||, như sau.

  <link href="//fonts.googleapis.com/css?family=Roboto+Condensed&effect=shadow-multiple|emboss|3d" rel="stylesheet" type="text/css">
 

Đây là cách hiệu ứng Emboss trông như thế nào.


Và dưới đây là hiệu ứng 3D mà chúng tôi vừa thêm vào.


Cần lưu ý rằng chúng ta không thể thêm nhiều hiệu ứng vào một phần tử duy nhất, vì các quy tắc kiểu hiệu ứng sẽ ghi đè lên nhau. Hơn nữa, bạn có thể truy cập trang demo để xem các hiệu ứng này đang hoạt động.

Tài nguyên khác

Trong tài liệu Google Webfont, bạn sẽ thấy các hiệu ứng phông chữ khác mà bạn có thể áp dụng, chẳng hạn như Fire, Fire Animation, Neon và nhiều hiệu ứng khác.

Nếu bạn thấy bài viết Cách thêm nhiều hiệu ứng phông chữ với Google Webfont trong các bước đơn giản hữu ích, hãy chia sẻ nó với bạn bè của bạn. Hẹn gặp lại các bạn trong những bài viết tiếp theo. Theo dõi driveria.net để nhận được các bản cập nhật mới nhất!