Bài viết này chỉ cho bạn các thủ thuật và kỹ thuật CSS hữu ích được sử dụng để tạo kiểu cho tiêu đề, phông chữ, văn bản và nội dung thay vì dựa vào Photoshop.

Bạn đang xem: thay đổi phông chữ tiêu đề css

Look Inside

Sự thật là chúng ta vẫn có thể tạo các tiêu đề lạ mắt, phông chữ và hiệu ứng văn bản thú vị mà không cần sử dụng Photoshop, mà chỉ với CSS. Trong bài viết này, tôi đã liệt kê một số thủ thuật và kỹ thuật CSS hữu ích có thể được sử dụng để tạo kiểu cho các tiêu đề, phông chữ và văn bản cũng như nội dung của bạn. Có lẽ, những thủ thuật CSS này có thể truyền cảm hứng cho bạn về những gì có thể làm được bằng cách sử dụng CSS thay vì phụ thuộc vào Photoshop.

Thủ thuật CSS cho Phông chữ và Văn bản

Tốt nhất về kiểu dáng CSS là nó có thể ảnh hưởng rất nhiều đến hiệu suất của trang web của chúng tôi về tải trang. Tuy nhiên, vấn đề duy nhất là khả năng tương thích của trình duyệt. Tuy nhiên, tôi vẫn thích sử dụng CSS để tạo kiểu cho các tiêu đề, phông chữ và văn bản trong một vấn đề thời gian. Bằng cách nào đó, luôn có “bản sửa lỗi” cho khả năng tương thích của các trình duyệt trên Internet. Chúc mừng !!!

Khoảng cách văn bản

Tôi tin rằng hầu hết các bạn đều biết về thuộc tính CSS line-height . Mặc dù vậy, tôi muốn giới thiệu cho bạn thêm một thuộc tính giãn cách văn bản CSS, đó là letter-spacing . Nó cho phép thay đổi khoảng cách ngang giữa các chữ cái. Với điều này, không còn vấn đề gì khi sử dụng phông chữ trông ‘chặt chẽ’ nữa.

 h2 {
khoảng cách giữa các chữ cái: 1px;
}

Viết hoa văn bản

Bạn có biết rằng chúng ta có thể viết hoa văn bản của mình chỉ với CSS không? Đây là cách nó hoạt động!

 h1 {
text-biến đổi: chữ hoa;
}
h2 {
text-biến đổi: viết hoa;
}
h3 {
text-biến đổi: chữ thường;
}

CSS3 Text Shadow

Rõ ràng, thuộc tính CSS3 text-shadow có khả năng tạo bóng dưới văn bản. Nó được các nhà thiết kế web sử dụng rộng rãi do tính đơn giản và hiệu quả.

Text Shadow

 h2 {
text-shadow: 2px 2px 2px #CCCCCC;
}

Chà, thực ra chúng ta còn có thể làm được nhiều hơn thế với thuộc tính CSS3 text-shadow thay vì chỉ để tạo bóng dưới văn bản. Bạn sẽ biết từ các thủ thuật CSS bên dưới. Vì vậy, chúng ta hãy tiếp tục đọc!

Xem Thêm  Common web application architectures - web architecture

Thủ thuật CSS @ font-face

Tất cả chúng ta đều biết rằng CSS3 đã giới thiệu một @ font-face quy tắc. Với điều này, chúng tôi có thể thoát khỏi việc chỉ sử dụng phông chữ “an toàn cho web”. Nhưng dù sao, không phải tất cả các trình duyệt (như IE) đều hỗ trợ quy tắc mới. Một mẹo nhỏ dành cho bạn - Sử dụng Font Squirrel @ font-face browser . Nó chỉ hoạt động ngay cả trong IE!

font-face

Tạo mới Kiểu phông chữ với CSS

Có, chúng tôi có thể tạo kiểu phông chữ của riêng mình bằng cách sử dụng CSS3 text-shadow . Đây là mẹo sử dụng CSS shadow! Hãy sáng tạo và tạo ra…

. Algerian {của bạn
text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 0 # 000000;
}
.castellar {
màu: #FFFFFF;
text-shadow: -1px 0 0 # 000000, 1px 1px 0 # 000000,
2px -1px 0 # 000000, 3px 0 0 # 000000;
}
.đề cương {
màu: #FFFFFF;
text-shadow: 1px 1px 0 # 000000, -1px 1px 0 # 000000,
1px -1px 0 # 000000, -1px -1px 0 # 000000;
}

Hiệu ứng chèn

Thêm hiệu ứng chèn vào văn bản và nội dung của bạn có thể dễ dàng thực hiện bằng CSS3 text-shadow. Để có kết quả tốt hơn trên các tiêu đề, bạn nên thêm nhiều 'bóng' vào nó.

. Inset h2 {
màu: # 444444;
text-shadow: -1px -1px 1px # 000, 1px 1px 1px #ccc;
}
.inset p {
nền: #CCCCCC;
text-shadow: 0 1px 0 #FFFFFF;
}

Hiệu ứng chữ nổi

Thủ thuật tạo hiệu ứng chữ in nổi khá giống với hiệu ứng chữ in. Bạn chỉ cần đảo ngược màu bóng và thay đổi phông chữ thành nửa trong suốt.

Hiệu ứng nổi

 .illess {
màu: # ECECF6;
text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px # 000000;
}
.emboss h2 {
độ mờ: 0,5;
}

Làm mờ bóng

Chúng tôi có thể làm cho bóng mờ bằng cách tăng giá trị của thuộc tính khoảng cách làm mờ (thuộc tính thứ ba của text-shadow ). Tất nhiên, thủ thuật CSS này sẽ tận dụng những bóng mờ này và tạo ra những hiệu ứng ngày càng bắt mắt.

. đèn neon {
màu: # D0F8FF;
text-shadow: 0 0 5px # A5F1FF, 0 0 10px # A5F1FF,
0 0 20px # A5F1FF, 0 0 30px # A5F1FF,
0 0 40px # A5F1FF;
}

Thủ thuật Nhiều lớp Bóng

Nếu chúng ta đặt giá trị của thuộc tính khoảng cách mờ thành 0, nó sẽ tạo ra một bản sao văn bản. Không nghi ngờ gì nữa, chúng ta có thể đặt bản sao ở vị trí khác. Vì vậy, hãy cố gắng tận dụng những bản sao này và tạo ra thứ gì đó hấp dẫn hơn như hiệu ứng 3D.

Nhiều lớp bóng

. threed {
màu: #CCCCCC;
text-shadow: 0 1px 0 # 999999, 0 2px 0 # 888888,
0 3px 0 # 777777, 0 4px 0 # 666666,
0 5px 0 # 555555, 0 6px 0 # 444444,
0 7px 0 # 333333, 0 8px 7px rgba (0, 0, 0, 0.4),
0 9px 10px rgba (0, 0, 0, 0,2);
}

Tạo mặt nạ CSS3

Đây là mẹo sử dụng thuộc tính tạo mặt nạ CSS3 trên văn bản.

Lớp CSS3 Masking

. mặt nạ h2 {
màu: #FFFFFF;
-webkit-mask-box-image: url (mask.png) 0 0 lặp lại;
}

-webkit-mask-box-image sẽ tạo mặt nạ trên phần tử được nhắm mục tiêu. Rất tiếc, tính năng tạo mặt nạ CSS3 sẽ chỉ hoạt động trong trình duyệt webkit . Các trình duyệt khác chưa được hỗ trợ.

Thủ thuật Gradient CSS3

Bạn có biết rằng chúng tôi thực sự có thể tạo văn bản gradient trong trang web của mình mà không cần sử dụng bất kỳ hình ảnh nào không, nhưng chỉ với CSS3 gradient cộng với CSS3 mask? Đây là thủ thuật CSS dành cho bạn!

CSS3 Gradient

 .gradient {
chức vụ: thân nhân;
}
.gradient: sau {
nội dung: 'Văn bản Gradient';
màu: # 000;
vị trí: tuyệt đối;
đầu: 0;
trái: 0;
z-index: -1;
}
.gradient h2 {
màu: # 117FB2;
-webkit-mask-box-image: -webkit-gradient (tuyến tính,
trên cùng bên trái, dưới cùng bên trái,
dừng màu (20%, rgba (0,0,0,1)),
dừng màu (100%, rgba (0,0,0,0)));
}

Thủ thuật CSS tạo hiệu ứng “nhấp chuột”

Thủ thuật CSS này cho phép bạn mô phỏng hiệu ứng nhấp chuột cho các liên kết của mình. Rõ ràng là bạn cũng có thể bắt chước hiệu ứng nhấn nút like cho các liên kết của mình bằng thủ thuật này.

Hiệu ứng nhấp chuột

 a.button {
đệm: 5px 20px;
nền: #CCCCCC;
border: 1px solid;
màu viền: #AAAAAA # 000000 # 000000 #AAAAAA;
văn bản-trang trí: không có;
font-weight: bold;
màu: # 000000;
}
a: hoạt động {
chức vụ: thân nhân;
đầu trang: 1px;
}
a.button: hoạt động {
chức vụ: thân nhân;
đầu trang: 1px;
trái: 1px;
màu viền: # 000000 #AAAAAA #AAAAAA # 000000;
}

Bố cục nhiều cột với CSS

Bạn đang tìm cách đưa các đoạn văn của mình vào bố cục cột đẹp và có tổ chức? Bạn không phải cố tình chia nội dung của mình thành hai hoặc nhiều hơn và đặt chúng vào trong bảng / bố cục khác nhau. Tuy nhiên, bạn có thể làm điều đó chỉ với thủ thuật CSS này!

Bố cục nhiều cột

 # column p {
-moz-cột-đếm: 2;
-webkit-column-count: 2;
cột-số: 2;
-moz-column-gap: 50px;
-webkit-column-gap: 50px;
cột-khoảng cách: 50px;
text-align: justify;
}

CSS Pseudo-Classes for Paragraph

Một số nhà thiết kế thích sử dụng drop caps trong nội dung. Để đạt được điều này, bạn có thể tạo một lớp CSS đặc biệt và bọc chữ cái đầu tiên bằng lớp này. Tuy nhiên, tôi sẽ chỉ cho bạn một giải pháp thay thế cho điều này chỉ bằng cách sử dụng CSS Pseudo-class.

 .content p: con đầu lòng {
font-style: nghiêng;
màu: # 333333;
}
.content p: first-child: ký tự đầu tiên {
cỡ chữ: 250%;
lề: 10px 7px 0;
float: trái;
}

Thủ thuật CSS lựa chọn văn bản

Cuối cùng nhưng không kém phần quan trọng, một mẹo CSS để ghi đè màu lựa chọn văn bản mặc định.

. nội dung p.green::selection {
nền: xanh lá cây;
màu: #FFFFFF;
}
.content p.green :: - moz-selection {/ * Firefox * /
nền: xanh lá cây;
màu: #FFFFFF;
}
.content p.red::selection {
nền: đỏ;
}
.content p.red :: - moz-selection {
nền: đỏ;
}
.content p.blue::selection {
nền: xanh lam;
màu: # FFF296;
}
.content p.blue :: - moz-selection {
nền: xanh lam;
màu: # FFF296;
}

Còn gì nữa?

Nhưng dù sao, nếu bạn có các thủ thuật CSS khác về điều này, hãy chia sẻ với chúng tôi! Chia sẻ là quan tâm…


Xem thêm những thông tin liên quan đến chủ đề thay đổi phông chữ tiêu đề css

CSS How to: font

alt

  • Tác giả: Chris Walker
  • Ngày đăng: 2013-02-17
  • Đánh giá: 4 ⭐ ( 9823 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: This video tutorial shows how to use the font property in CSS. You can modify font size, style on your web site with this one declaration
    http://www.technoblogical.com/web-design/

    Providing training since last Tuesday
    http://www.technoblogical.com
    Thanks for watching!

CSS: tô đậm một số văn bản mà không thay đổi kích thước vùng chứa của nó

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 6056 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Tôi đã gặp vấn đề tương tự, nhưng có hiệu ứng tương tự với một chút…

Thay thế hoặc Thêm Phông chữ Mới cho Blogger

  • Tác giả: www.chunproductions.xyz
  • Đánh giá: 5 ⭐ ( 8489 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Guide to Replace or Add A New Font, Guide to Replace or Add A New Font Median UI, Guide to Replace or Add A New Font Blogger

[Tự học CSS]–Tìm hiểu về các kiểu phông chữ trong CSS

  • Tác giả: thietkeweb5ngay.com
  • Đánh giá: 5 ⭐ ( 3273 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách thay đổi kích thước phông chữ HTML trong CSS

  • Tác giả: funix.edu.vn
  • Đánh giá: 4 ⭐ ( 7790 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Là một developer, bạn sẽ không thể tiến xa nếu không biết cách thay đổi kích thước phông chữ trong CSS. Bài viết này sẽ hướng dẫn bạn cách thực hiện.

Phông chữ trong CSS

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 4528 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thuộc tính của phông chữ trong CSS sẽ xác định phông chữ nào, nét chữ, kích cỡ, và kiểu chữ của văn bản. Đây chính là sự khác biệt giữa các phông

Phông Chữ CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 4955 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính `font` CSS giúp thiết lập họ phông chữ, độ đậm, kích thước và kiểu văn bản.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php