Lỗi font chữ khi view source code trên chrome

Please see an updated answer here: Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

The old way is as follows:

Go to the following directory:

%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets\

Mac:

~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

and open the Custom.css file. If it doesn't exist, create one.

Add the following lines:

body.platform-windows .monospace, 
body.platform-windows .source-code, 
td.webkit-line-content {
  font-size: 15px !important;
  font-family: Consolas, Lucida Console, monospace !important;
  tab-size: 2;
}

All you're doing is customizing classes used internally by Chrome. The .monospace class is pretty self evident. The .source-code class affects items in your developer tools (F12). The one that you are looking for is the td.webkit-line-content, it's the one that applies style to the line items when you choose to View page source.

You can also edit the line numbers as well by adding styles for td.webkit-line-number and can also edit the line number background by adjusting the style for div.webkit-line-gutter-backdrop.

Trình duyệt Chrome cung cấp cho người dùng các thiết lập để thay đổi giao diện trang web hiển thị trên trình duyệt, bao gồm cả việc thay đổi font chữ trang web trên Chrome. Người dùng có thể thay đổi kích cỡ chữ hoặc font chữ dễ nhìn hơn, nhất là với những người trung niên khi sử dụng máy tính. Ngoài ra một số tiện ích cũng hỗ trợ chúng ta đổi font chữ trình duyệt, cung cấp nhiều tùy chọn thay đổi giao diện trang web hơn so với trình thay đổi font chữ mặc định trên Chrome. Tùy theo nhu cầu của mỗi người muốn đổi font chữ trang web trên Chrome mà có thể lựa chọn 1 trong 2 cách dưới đây. Bài viết dưới đây sẽ hướng dẫn bạn đọc cách thay đổi font chữ trên Chrome.

1. Hướng dẫn đổi font chữ trên Chrome

Video hướng dẫn đổi font chữ trên Chrome

Bước 1:

Tại giao diện trình duyệt Chrome chúng ta nhấn vào biểu tượng 3 dấu gạch dọc rồi chọn Cài đặt để vào giao diện thiết lập của trình duyệt. Chuyển sang giao diện mới, người dùng kéo xuống tới phần Hình thức rồi nhấn vào Tùy chỉnh phông chữ.

Bước 2:

Khi đó bạn sẽ thấy các tùy chọn thay đổi font chữ trên trình duyệt, như kích thước của phông chữ tối thiểu, phông chữ tiêu chuẩn, phông chữ Serif,.. Chúng ta điều chỉnh theo từng mục để áp dụng thay đổi cho trình duyệt.

Bước 3:

Mọi thay đổi cho cỡ chữ hiển thị trên trình duyệt đều được áp dụng để chúng ta xem trước có phù hợp hay không. Các thay đổi tự động được áp dụng cho trình duyệt Chrome.

Như vậy font chữ trên Google Chrome đã được thay đổi. Tuy nhiên dựa theo trình thiết lập chữ có sẵn trên Chrome rất hạn chế nên bạn có thể sử dụng tiện ích hỗ trợ đổi font chữ dưới đây.

2. Cách dùng tiện ích đổi font chữ trang web Chrome

Bước 1:

Chúng ta cài đặt tiện ích Fonts Changer cho trình duyệt web theo link dưới đây.

• Tải tiện ích Fonts Changer Chrome

Bước 2:

Bây giờ người dùng mở trang web muốn thay đổi font chữ hay trang web bất kỳ bao gồm Chrome Store. Nhấn vào biểu tượng tiện ích tại thanh truy cập địa chỉ trình duyệt và thấy giao diện đổi font chữ. Chúng ta tiến hành thay đổi theo từng nội dung như dưới đây.

• Font size: Điều chỉnh kích thước phông chữ thường.
• Minimum font size: Điều chỉnh kích thước phông chữ nhỏ.
• Standard font: Thay đổi kiểu phông chữ mặc định của trang web.
• Serif font: Thay đổi kiểu phông chữ Serif (chữ có chân) trên trang web.
• Sans-serif font: Thay đổi kiểu phông chữ Sans-serif (chữ không chân) có trên trang web.
• Fixed-width font: Thay đổi kiểu phông chữ đơn cách.

Font chữ mới sẽ được áp dụng ngay tức thời như hình dưới đây. Tuy nhiên để trở về với font chữ mặc định của trang web thì bạn buộc phải gỡ tiện ích mà không có tùy chọn quay về font chữ mặc định.

Nếu bạn bị hấp dẫn bởi một font chữ trên một website bất kì và muốn tìm cách tải về cho bằng được nhưng không biết làm sao? Hôm nay, Sforum.vn sẽ hướng dẫn bạn cách tìm font chữ trên website bằng cách view source HTML (kiểm tra phần tử của trình duyệt) cũng như sử dụng tiện ích mở rộng trên máy tính cực kỳ dễ dàng.

Mời bạn đọc tìm hiểu ngay trong bài viết dưới đây nhé.

• Intel Core i5 – Sự cân bằng giữ tính năng, sự ổn định và giá cả
• Vocal Remover: Tách lời, tạo beat karaoke cực đơn giản

Cách tìm font chữ của website bằng Source HTML

Nếu như bạn chưa biết thì cách view source HTML trên trình duyệt thường được dùng để kiểm tra mã nguồn của một trang web. Bạn có thể thấy được các dòng CSS, HTML và những thông tin khác của website đó. Đối với những bạn học lập trình, thiết kế web thì có thể học hỏi, phân tích, lấy cảm hứng thiết kế thông qua cách thức này. Để tìm font chữ trên website bằng view source html, bạn thực hiện theo 1 trong 2 cách dưới đây:

Cách 1

Bước 1: Hãy mở một trang website bạn muốn sử dụng.

Bước 2: Quét chọn vào văn bản chứa font chữ bạn muốn tìm kiếm > Nhấn chuột phải, chọn vào mục Kiểm tra để mở trình view source.

Bước 3: Trình source sẽ hiển thị ra và bạn hãy tìm tới tab Computed được viền đỏ trong hình dưới đây > Cuộn xuống và tìm thẻ font-family, như hình dưới đây sẽ là font Helvetica Neue. Bạn cũng có thể thấy được kích thước font qua thẻ font-size.

Cách 2

Bước 1: Mở trang web bạn muốn sử dụng > Nhấn tổ hợp phím Ctrl + Shift + C, trình view source sẽ hiển thị.

Bước 2: Lúc này bạn chỉ cần di chuyển chuột đến phần văn bản mà bạn muốn tìm font chữ thì nó sẽ tự động hiển thị font chữ, mã màu của font, canh lề (margin), kích thước chữ.

Tìm font chữ bằng tiện ích mở rộng

Nếu bạn không muốn tìm kiếm bằng cách view source html thì bạn cũng có thể thực hiện cách tiện lợi hơn là sử dụng tiện ích mở rộng. Dưới đây là 2 tiện ích giúp bạn phát hiện font chữ trên website khá phổ biến đó là What Font - find font và Font Finder.

What Font - find font

Bước 1: Thêm tiện ích mở rộng What Font - find font cho Chrome hoặc Cốc Cốc theo link tại đây.

Bước 2: Bạn chỉ nhấn vào biểu tượng của tiện ích này góc trên bên phải màn hình để kích hoạt > Sau đó, bạn hãy rê chuột đến bất cứ chỗ văn bản nào bạn muốn và click chuột một cái để hiển thị chi tiết tên font, kích thước...

Font Finder

Bước 1: Thêm tiện ích Font Finder cho Chorme/Cốc Cốc theo link tại đây.

Bước 2: Nhấn vào biểu tượng của tiện ích để bật tính năng tìm kiếm.

Sau đó rê chuột đến văn bản chứa font chữ cần tìm và nhấn vào đó. Lúc này trên màn hình máy tính sẽ hiển thị một bảng thông số bao gồm tên font chữ, độ đậm của font, kích thước font, màu sắc...

Tìm font chữ bằng hình ảnh với WhatTheFont

Ngoài ra các cách trên, bạn cũng có thể tìm font chữ bằng cách nhờ vào các website tìm kiếm font chữ bằng hình ảnh như WhatTheFont, WhatFontIs , FontSquirrel , Fontspring. Cách thức thực hiện trên các website trên là tương tự nhau nên mình sẽ chỉ hướng dẫn trên WhatTheFont thôi nhé!

Bước 1: Bạn hãy chụp màn hình phần văn bản chưa font chữ bạn muốn tìm kiếm.

Bước 2: Truy cập vào trang web của WhatTheFont theo link tại đây.

Bước 3: Kéo và thả trực tiếp ảnh chụp màn hình ở bước 1 vào website.

Nhấn vào mũi tên xanh như hình dưới đây để tự động nhận dạng font chữ.

Sau đó một danh sách font chữ có đường nét tương đồng, liên quan sẽ hiện ra.

Bước 4: Nếu bạn không tìm thấy kết quả ngay lập tức thì bạn có thể nhấn vào nút Show more result (Hiển thị thêm kết quả) để tìm kiếm.

Kết luận

Cuối cùng, trong những cách hướng dẫn trên thì mình thấy cách chính xác nhất là tìm font kiếm chữ bằng cách view source html và dùng tiện ích mở rộng. Còn cách cuối cùng thì bạn có thể dùng để tham khảo thêm nhiều font chữ khác liên quan làm cảm hứng. Chúc bạn thực hiện thành công nhé!