Tối ưu font tùy chỉnh với @font-face

@font-face rất hợp nếu bạn muốn tạo phong cách riêng cho trang, mặc dù hiện nay các font tùy chỉnh cho tiếng Việt vẫn hạn chế về tính ứng dụng thực tế, nhưng cũng đã khá hơn nhiều so với cách đây vài năm. Và nhìn chung đối với các văn bản ngắn bạn có rất nhiều lựa chọn. Một nguồn miễn phí đáng tin cậy để tải các font tùy chỉnh hỗ trợ tốt tiếng Việt là Google Fonts. Bạn có thể sử dụng tính năng lọc ở trên cùng (ví dụ theo category) để nhanh chóng tìm ra …

Đọc thêm

Tìm hiểu về font cho web (hướng dẫn từ Mozilla)

Trong phần đầu của bài, chúng ta sẽ khám phá các tính năng cơ bản dành cho việc định kiểu font và văn bản. Càng về sau, bài viết sẽ đi vào chi tiết và nâng cao hơn. Chúng ta sẽ học cách sử dụng font tùy chỉnh (custom fonts) để cho phép bạn khả năng có được sự đa dạng về kiểu dáng của văn bản. Tóm tắt về font-family Thuộc tính font-family được sử dụng để điều chỉnh văn bản trong HTML. Nó có thể lấy một hoặc nhiều tên font-family. Khi hiển thị một trang web, trình …

Đọc thêm

Mẹo với @font-face: định nghĩa font-weight và font-style để giữ CSS của bạn đơn giản hơn

Khi chúng ta sử dụng @font-face để nhúng font vào website, mà bản thân font đó có một số weight (độ đậm nhạt, light, bold,…) và style (nghiêng, italic) khác nhau thì CSS của bạn có thể trông rối nếu bạn không định nghĩa những weight và style này trong khai báo (declarations) của @font-face. Không may là một số hướng dẫn và các dịch vụ nhúng font lại không làm tốt điều này. Khao báo nhiều tên font-family cho cùng một kiểu font sẽ làm CSS của bạn trở nên phức tạp OK, giờ chúng ta sẽ xem vấn …

Đọc thêm

Vài kinh nghiệm thiết kế web đơn giản

Tôi đang làm một ứng dụng trên nền tảng web, dù khá đơn giản nhưng trong quá trình làm cũng vỡ ra được nhiều điều- bài viết này tôi sẽ chia sẻ một số trải nghiệm đó. Đừng đợi (cảm thấy) giỏi rồi mới viết Đây có lẽ là vấn đề với không ít người, chúng ta thường nghĩ mình chưa đủ giỏi để viết một cái gì đó mà chúng ta thực sự muốn. Thực tế là đúng phần nào, bạn sẽ cần đến ngưỡng nào đó để bắt đầu viết một ứng dụng chuyên sâu, làm thuê cho …

Đọc thêm

Code chống copy, click chuột phải và ctrl + u, song kiếm hợp bích CSS và JavaScript

Ngăn thao tác quét bài viết là cách chống copy đơn giản nhưng khá hiệu quả. Tuy nó không chống lại được các đối tượng sao chép có chuyên môn về công nghệ thông tin, nhưng với các đối tượng copy thông thường thì rất hữu hiệu. Trong bài viết này Kiến càng sẽ “song kiếm hợp bích” cả 2 biện pháp là sử dụng CSS kết hợp với JavaScript. Bạn chỉ cần đưa đoạn code sau vào trước thẻ đóng </head> của mẫu HTML trang web của bạn là thành công: Nếu bạn muốn chống thêm cả thao tác …

Đọc thêm

Độ phân giải màn hình phổ biến, ứng dụng trong việc thiết kế website responsive

Chúng ta biết rằng để thiết kế được website đáp ứng (responsive) đẹp mắt, chúng ta phải biết được điểm breakpoint của màn hình để đưa vào thẻ @media (min-width: Vpx) {// CSS đặt ở đây} Trong đó V là giá trị cụ thể chẳng hạn @media (min-width: 360px) chỉ ra rằng màn hình tối thiểu phải đạt kích cỡ này đoạn CSS mới được thực thi. Đặc biệt trên các thiết bị di động có màn hình nhỏ từ 320px cho đến cỡ 420px việc chênh nhau chỉ 10 – 15px thôi mà không để ý có thể nhẹ …

Đọc thêm

Thử tìm hiểu về cách tạo website Responsive (bài 1)

Ngày nay, một trang web không chỉ cần đẹp mắt trên màn hình máy tính để bàn, mà còn cần ổn thỏa trên cả máy tính bảng và đặc biệt là thiết bị di động nữa. Một website được gọi là responsive nếu nó có khả năng đáp ứng, thay đổi tùy theo kích cỡ màn hình của người dùng. Ở thời điểm hiện tại, website được thiết kế responsive là điều cực kỳ quan trọng, và trong thực tế là kỹ thuật mà bạn phải thành thạo nếu định đi theo con đường lập trình hoặc thiết kế website. …

Đọc thêm

Đừng bị gò bó trong CSS mặc định của theme: cách dễ nhất để “trang điểm” cho website của bạn!

Bạn có biết cách đơn giản nhất để làm một website đẹp lên trông thấy mà không tốn đồng nào? Yep, tiêu đề lộ luôn rồi đấy ạ: sử dụng CSS. CSS là phấn son, trang phục của cô nàng website mặt mộc. Trong bài viết này tôi sẽ nói về các tùy chọn CSS mà bạn có thể sử dụng để làm đẹp bất cứ website nào (bao gồm cả WordPress). OK, let’s go. Font chữ Chữ là thành phần quan trọng trong hơn 97% website(*). Có vài thứ mà bạn cần chú ý: Kích cỡ font: đừng to …

Đọc thêm

Các yếu tố đơn giản giúp bạn cải thiện sự hài lòng của người đọc trên website sử dụng WordPress [Hướng dẫn tổng quan]

Có những thứ tưởng chừng bé nhỏ khi liên quan đến sự tiện dụng của người đọc mà chúng ta dễ bỏ qua, dễ bỏ qua đến mức khó tin. Nhưng có 2 vấn đề: Thực ra thì từng thứ đó chẳng hề bé tí nào (chốc nữa tôi sẽ chứng minh cho bạn thấy); Và tập hợp chúng lại thì lại càng không bé! OK, giờ đến phần chứng minh. Font chữ quá nhỏ, kiểu font hoặc màu sắc có vấn đề Bạn đã bao giờ thấy website nào có font chữ quá bé chưa? Bạn phải nheo mắt, …

Đọc thêm