Phông chữ WordPress không thay đổi
Phông chữ có thể tạo ra sự khác biệt giữa một trang web buồn tẻ và một trang web đẹp. Bằng cách học cách thay đổi phông chữ trong WordPress, bạn có thể làm cho trang web của mình trông hiện đại, chuyên nghiệp và có thương hiệu Show
Nhưng cách tốt nhất để sử dụng phông chữ trong trang web WordPress của bạn là gì và làm cách nào để bạn chọn đúng phông chữ cho thiết kế của mình? Trong hướng dẫn này, tôi sẽ hướng dẫn bạn mọi thứ bạn cần biết về phông chữ trong WordPress. Bạn sẽ tìm hiểu về Phông chữ. thuật ngữHãy bắt đầu bằng cách xem thuật ngữ xung quanh phông chữ trên web
Hãy cùng xem các tùy chọn để thêm phông chữ vào trang web của bạn Cách thêm phông chữ vào trang web WordPress của bạn (Tùy chọn)Trước khi bắt đầu thêm phông chữ vào trang web của bạn, sẽ hữu ích nếu bạn hiểu các tùy chọn có sẵn cho mình Xem cách Kinsta chống lại đối thủ. Đối chiếu Phông chữ là một phần trong thiết kế trang web của bạn, vì vậy trong hầu hết các trường hợp, chúng sẽ được mã hóa thông qua chủ đề của bạn – nhưng không phải lúc nào cũng vậy. Trong một số trường hợp, bạn có thể quyết định sử dụng plugin để bật phạm vi phông chữ rộng hơn trong trang web của mình Dưới đây là một số tùy chọn có sẵn cho bạn
Có hai điểm khác biệt chính – liệu bạn sử dụng phông chữ web, được lưu trữ bên ngoài trang web của bạn hay bạn chọn tự lưu trữ các tệp phông chữ của mình. Trong hướng dẫn này, chúng ta sẽ xem xét ưu và nhược điểm của từng Hãy bắt đầu bằng cách xem phông chữ web. tại sao bạn có thể chọn sử dụng chúng và cách thêm chúng vào trang web của bạn Sử dụng Phông chữ Web trong WordPressPhông chữ web là cách phổ biến nhất để thêm phông chữ vào trang web của bạn vì chúng giúp dễ dàng thêm nhiều loại phông chữ Phông chữ Web là gì?Phông chữ web là phông chữ được lưu trữ trên trang web của nhà cung cấp bên thứ ba. Thay vì sao chép các tệp vào trang web của riêng bạn, bạn liên kết đến trang web của nhà cung cấp và chúng được kéo vào từ đó Điều này có nghĩa là bạn có quyền truy cập vào nhiều loại phông chữ mà không phải sử dụng không gian máy chủ trên dịch vụ lưu trữ của riêng bạn. Điều đó cũng có nghĩa là nếu tệp phông chữ thay đổi theo thời gian, thì bạn không phải cập nhật tệp của mình và bạn sẽ tự động có quyền truy cập vào phiên bản mới của tệp từ nhà cung cấp Phông chữ web có thể miễn phí hoặc bạn có thể trả tiền cho chúng, thường thông qua đăng ký. Một số nhà cung cấp phổ biến là
Tất cả các nhà cung cấp này cho phép bạn cung cấp phông chữ trực tiếp từ máy chủ của họ bằng cách thêm một số mã vào trang web WordPress của bạn hoặc đôi khi bằng cách sử dụng plugin có nghĩa là bạn không phải thêm bất kỳ mã nào Phông chữ web khác với phông chữ an toàn trên web. Bạn có thể sử dụng chúng làm dự phòng cho phông chữ web trong trường hợp khách truy cập trang web của bạn không thể kết nối với phông chữ web vì một số lý do. Tôi sẽ chỉ cho bạn cách làm điều đó sau trong bài đăng này Tại sao nên sử dụng Phông chữ Web?Vì vậy, bây giờ bạn đã biết phông chữ web là gì, tại sao bạn lại chọn sử dụng chúng thay vì lưu trữ phông chữ của riêng bạn? Dưới đây là một số lợi ích
Hầu hết các trang web sử dụng phông chữ web, với phông chữ an toàn cho web làm bản sao lưu. Và với WordPress, điều đó rất dễ thực hiện Tìm phông chữ web tốt nhất cho trang web của bạnĐã quyết định sẽ sử dụng phông chữ web, giờ đây bạn có một quyết định khó khăn. những phông chữ để sử dụng? Vào thời xa xưa khi tất cả các nhà phát triển web có quyền truy cập vào những phông chữ an toàn cho web được cài đặt sẵn đó, đây là một quyết định rất dễ dàng. Bạn muốn sử dụng phông chữ serif hay sans-serif? . ) Sau khi đưa ra quyết định đó, sự lựa chọn của bạn rất hạn chế Nhưng bây giờ, thế giới là con hàu của bạn Dưới đây là một số mẹo giúp bạn chọn phông chữ tốt nhất cho trang web của mình
Khi bạn đã chọn phông chữ của mình, hãy dành thời gian thử nghiệm với chúng. Các nhà cung cấp phông chữ như Google Fonts cho phép bạn nhập văn bản tùy chỉnh để xem nó trông như thế nào trong phông chữ bạn đã chọn. Sau khi bạn nhìn thấy văn bản của chính mình trong phông chữ, nó có thể giúp bạn quyết định xem đó có phải là phông chữ phù hợp với bạn không Thử nghiệm với phông chữ của bạnVà hãy nhớ rằng việc sử dụng phông chữ web giúp thay đổi phông chữ của bạn rất dễ dàng để bạn luôn có thể chuyển sang tùy chọn khác trong khi phát triển chủ đề hoặc thiết lập trang web của mình Cách thêm phông chữ web bằng plugin WordPressVì vậy, bạn đã chọn phông chữ đã chọn, bây giờ là lúc thêm nó vào trang web của bạn Nếu bạn không cảm thấy thoải mái khi thêm mã vào các tệp chủ đề của mình, bạn có thể cài đặt plugin cho phép bạn truy cập Google Fonts và sử dụng bất kỳ phông chữ nào bạn muốn trên trang web của mình Plugin Google Fonts Typography cung cấp cho bạn quyền truy cập vào toàn bộ thư viện phông chữ của Google và cho phép bạn xem lại chúng thông qua Trình tùy chỉnh WordPress Cài đặt plugin trên trang web của bạn giống như bất kỳ plugin nào khác, sau đó kích hoạt nó Chuyển đến Giao diện > Tùy chỉnh để truy cập Tùy biến. Bạn sẽ thấy một phần dành cho Google Fonts Google Fonts trong CustomizerNhấp vào liên kết đó để truy cập cài đặt cho phông chữ của bạn. Cấu hình chúng như sau Cài đặt cơ bản. định cấu hình phông chữ mặc định cho nội dung văn bản và tiêu đề của bạn, cũng như bất kỳ nút nào. Trong ảnh chụp màn hình bên dưới, bạn có thể thấy rằng tôi đã thêm một phông chữ có chân dễ đọc cho phần nội dung và một phông chữ đặc biệt hơn cho các tiêu đề Định cấu hình cài đặt cơ bảnCài đặt nâng cao. Tại đây, bạn có thể định cấu hình nhãn hiệu (tiêu đề và mô tả trang web), điều hướng (menu của bạn), nội dung và tiêu đề chi tiết hơn, thanh bên và chân trang của bạn. Bạn cũng có thể tải phông chữ mà không cần gán chúng cho bất kỳ thứ gì, điều đó có nghĩa là bạn có thể thêm chúng vào bất kỳ CSS tùy chỉnh nào trong Trình tùy chỉnh Tải phông chữ. Nếu có bất kỳ trọng lượng phông chữ nào bạn không cần (tôi. e. đậm, nghiêng, đại loại như vậy), bạn có thể bỏ chọn chúng ở đây để chúng không làm chậm trang web của bạn một cách không cần thiết gỡ lỗi. Sử dụng điều này để buộc bất kỳ phông chữ nào hiển thị nếu chúng không hoạt động như bình thường Dành thời gian làm việc với các cài đặt này và kiểm tra chúng trong Tùy biến để đảm bảo chúng hoạt động theo cách bạn muốn. Sau đó, khi bạn hài lòng với cài đặt của mình, hãy nhấp vào nút Xuất bản. Đừng rời khỏi Tùy biến mà chưa nhấp vào Xuất bản, nếu không bạn sẽ mất các thay đổi của mình Chỉnh sửa màu phông chữPhiên bản miễn phí của plugin không cho phép bạn chỉnh sửa màu phông chữ của mình. Để làm điều đó, bạn sẽ phải mua phiên bản cao cấp hoặc sử dụng tùy chọn CSS bổ sung trong Công cụ tùy chỉnh Quay lại màn hình chính của Công cụ tùy chỉnh và nhấp vào tab CSS bổ sung. Bạn sẽ thấy một vùng văn bản trống nơi bạn có thể thêm CSS của riêng mình Để tìm phần tử bạn cần tạo kiểu, hãy chọn phần tử đó và sử dụng trình kiểm tra mã trong trình duyệt của bạn để tìm xem phần tử đó đã có kiểu màu gì Dưới đây tôi đang sử dụng Google Chrome và tôi đã nhắm mục tiêu một yếu tố 0Kiểm tra mã của bạn trong ChromeTrong chủ đề WordPress của tôi, nó được thừa hưởng màu sắc từ phần tử cơ thể. Tôi muốn thêm một cái gì đó cụ thể hơn. Trong vùng văn bản cho CSS của bạn, hãy nhập CSS cho phần tử của bạn và màu bạn muốn sử dụng. Của tôi trông như thế này
Điều đó mang lại cho tôi một phần tử h1 màu hồng sáng Thay đổi màu sắc của tiêu đềBạn có thể lặp lại điều này với bất kỳ thành phần văn bản nào mà bạn muốn thêm màu vào, cũng như với bất kỳ thành phần nào bạn muốn thêm phông chữ tùy chỉnh không được bao gồm trong các tùy chọn trong các màn hình khác. Nếu bạn muốn biết sử dụng CSS nào cho phông chữ, hãy đọc phần của bài đăng này về việc sửa đổi phông chữ của bạn thông qua CSS Cách thêm phông chữ web theo cách thủ côngNếu bạn không muốn thêm plugin bổ sung vào trang web của mình và có quyền truy cập vào mã cho chủ đề của mình, bạn có thể cài đặt và sử dụng phông chữ web bằng cách thêm một số mã vào tệp chức năng và biểu định kiểu của bạn Nếu trang web của bạn đang sử dụng một chủ đề riêng biệt mà bạn có thể chỉnh sửa, thì bạn có thể chỉnh sửa tệp chức năng và biểu định kiểu từ chủ đề của mình. Nhưng nếu bạn đang sử dụng chủ đề của bên thứ ba mà bạn đã mua hoặc lấy từ thư mục chủ đề WordPress, thì bạn sẽ cần tạo một chủ đề con. Sau đó, bạn sẽ cần cung cấp cho nó hai tệp. chức năng. php và kiểu. css Hãy thực hiện quy trình thêm phông chữ web vào chủ đề của bạn theo cách thủ công. Tôi sẽ làm việc với Google Fonts cho ví dụ này, vì nó được sử dụng phổ biến nhất và nó miễn phí Chọn một phông chữ và lấy liên kếtBắt đầu bằng cách chọn phông chữ của bạn từ Google Fonts. Thêm nó vào thư viện của bạn bằng cách nhấp vào biểu tượng dấu cộng bên cạnh nó Nhấp vào tab ở cuối màn hình cho thư viện của bạn và bạn sẽ thấy một số mã để bạn thêm vào trang web của mình. Nếu bạn muốn thêm các kiểu và trọng lượng phông chữ bổ sung, hãy nhấp vào tab Tùy chỉnh và chọn những kiểu bạn muốn. Sau đó quay lại tab Nhúng Don’t copy the code exactly: you’ll be using it, but instead of calling the font in the section of your site’s header, you’ll be enqueuing the fonts. This is the correct way to do it in WordPress.Thay vào đó, từ phần Nhúng phông chữ, chỉ sao chép liên kết đến phông chữ Vì vậy, trong trường hợp của tôi, Google Fonts đang cung cấp cho tôi mã này
Tôi chỉ cần sao chép bit này
Xếp hàng (các) phông chữMở tệp chức năng của chủ đề của bạn và thêm phần sau, thay thế liên kết cho phông chữ của tôi bằng liên kết mà Google đã cung cấp cho bạn cho phông chữ của bạn
Điều này bao gồm phong cách từ các máy chủ Google Fonts. Nếu bạn cần thêm nhiều phông chữ hơn cho nó trong tương lai, bạn có thể thêm một dòng mới vào chức năng của mình hoặc thêm nó vào cùng một dòng, như vậy
Điều này sẽ bao gồm cả phông chữ Merriweather và Raleway Thêm (các) Phông chữ vào Biểu định kiểu của bạnĐiều này sẽ không làm cho phông chữ hoạt động trong trang web của bạn. bạn vẫn cần thêm nó vào biểu định kiểu của chủ đề mở phong cách. css trong chủ đề của bạn và thêm mã để định kiểu các thành phần riêng lẻ bằng phông chữ web của bạn. Đảm bảo rằng bạn thêm nó sau bất kỳ CSS hiện có nào cho phông chữ, nếu không nó có thể bị ghi đè bởi điều đó Những phần tử nào bạn tạo kiểu sẽ tùy thuộc vào bạn, nhưng thông thường bạn sẽ sử dụng phông chữ dễ đọc cho phần thân và thứ gì đó lạ mắt hơn cho các tiêu đề
Trong trường hợp trên, mọi thứ trên trang sẽ sử dụng phông chữ Raleway, ngoại trừ các phần tử h1, h2 và h3 sẽ sử dụng phông chữ Merriweather Bây giờ, hãy lưu biểu định kiểu của bạn và kiểm tra trang web của bạn để đảm bảo rằng tất cả đều hoạt động như bạn mong đợi. Nếu các phông chữ mới không hiển thị, hãy thử xóa bộ nhớ cache của trình duyệt và kiểm tra xem các phông chữ đó có bị ghi đè bởi bất kỳ kiểu dáng nào đối với các phông chữ thấp hơn trong biểu định kiểu dáng không. Đây là lý do tại sao nên thêm kiểu mới của bạn ở cuối biểu định kiểu hoặc thay thế kiểu phông chữ hiện tại bằng kiểu mới của bạn (thậm chí còn tốt hơn) Thêm phông chữ dự phòngCó thể đôi khi ai đó truy cập trang web của bạn và không thể truy cập tệp phông chữ web vì một số lý do. Có thể họ đang sử dụng hoặc sử dụng một thiết bị cũ không hiển thị phông chữ web. Hoặc có thể nhà cung cấp phông chữ web của bạn đang gặp sự cố kỹ thuật Vì lý do này, bạn nên có một bản sao lưu tại chỗ Mã mà Google phông chữ cung cấp cho bạn đã có bản sao lưu chỉ cần chỉ định 1hoặc 2, nhưng chúng tôi có thể tiến thêm một bước nữaSử dụng một trong các phông chữ sẵn sàng cho trang web đã được cài đặt trên máy của khách truy cập của bạn, sau đó bao gồm dự phòng thứ hai chỉ là 1 hoặc 2, trong trường hợp họ đang sử dụng thiết bị di động thậm chí không có phông chữ sẵn sàng cho trang webQuay lại biểu định kiểu của bạn và chỉnh sửa CSS của bạn để nó đọc giống như thế này
Điều này có nghĩa là những người truy cập trang web của bạn sẽ thấy phông chữ web của bạn nếu tất cả đều ổn; Lưu trữ phông chữ của riêng bạn trong WordPressMột số nhà phát triển không thích sử dụng phông chữ web mà thay vào đó lưu trữ phông chữ trên máy chủ của riêng họ và bạn có thể là một trong số họ Điều này có thể vì một hoặc nhiều lý do, bao gồm bảo mật, hiệu suất hoặc ngân sách Nếu bạn lo lắng về hiệu suất, bạn có thể tối ưu hóa hiệu suất của phông chữ web của mình theo một số cách sẽ được đề cập sau trong bài đăng này. Nhưng nếu bạn đã quyết định đi theo tuyến đường địa phương, bạn sẽ cần biết cách thực hiện Tại sao lưu trữ phông chữ của riêng bạn?Sử dụng phông chữ web thường dễ dàng hơn và có thể giúp bạn linh hoạt hơn cũng như chiếm ít dung lượng hơn trên máy chủ của bạn. Nhưng điều đó không có nghĩa là không có trường hợp phông chữ lưu trữ cục bộ có thể không phù hợp hơn Lý do bạn có thể muốn lưu trữ phông chữ cục bộ bao gồm Bạn có thể thấy rằng bạn có thể khắc phục một số vấn đề này
Nơi tìm phông chữ bạn có thể lưu trữ cục bộNhiều phông chữ web cũng có thể được tải xuống để sử dụng làm phông chữ được lưu trữ cục bộ, nhưng bạn sẽ phải kiểm tra xem giấy phép có cho phép điều này không. Trong trường hợp của Google Fonts, nó được phép Bạn cũng sẽ thấy rằng có những phông chữ không có sẵn dưới dạng phông chữ web mà bạn có thể tải xuống và tự lưu trữ. Bất kỳ tệp phông chữ nào bạn có thể tải xuống máy tính của mình cũng có thể được tải lên trang web của bạn và được lưu trữ ở đó. Nếu bạn cần sử dụng phông chữ không có sẵn dưới dạng phông chữ web để liên kết với thương hiệu của mình, thì đây sẽ là giải pháp nhưng hãy đảm bảo giấy phép của bạn cho phép Cách thêm phông chữ được lưu trữ cục bộ vào trang web WordPress của bạnVì vậy, bạn biết bạn muốn lưu trữ cục bộ phông chữ của mình, bạn sẽ thiết lập nó như thế nào? Quá trình này khác với việc sử dụng phông chữ web. Bạn phải tải (các) tệp lên trang web của mình và bạn liên kết tới chúng trong biểu định kiểu của mình mà không cần phải xếp chúng vào hàng đợi trong tệp chức năng của bạn Tải xuống và chuyển đổi phông chữBắt đầu bằng cách tải xuống các phông chữ bạn muốn sử dụng. Trong Google Fonts, bạn có thể thực hiện việc này bằng cách nhấp vào biểu tượng tải xuống khi xem phông chữ trong thư viện của mình Tải xuống phông chữ từ Google FontsGiải nén tệp phông chữ trên máy tính của bạn và xóa mọi trọng lượng phông chữ bạn không cần sử dụng trên trang web của mình. không ích gì khi tải lên các tệp mà bạn sẽ không sử dụng Để sử dụng trên trang web của bạn, các tệp sẽ cần phải ở trong. định dạng woff. Nếu chúng không phải (chúng sẽ không như vậy nếu bạn lấy chúng từ các phông chữ của Google), bạn có thể sử dụng một dịch vụ như Convertio để chuyển đổi chúng Tải phông chữ lên chủ đề của bạnBây giờ hãy tải (các) tệp phông chữ lên chủ đề của bạn, trong wp-content/themes/themename, trong đó themename là thư mục dành cho chủ đề của bạn. Bạn nên đặt bất kỳ tệp phông chữ nào vào thư mục riêng của chúng trong chủ đề, chẳng hạn như thư mục phông chữ Nếu bạn đang làm việc với chủ đề của bên thứ ba, hãy tạo một chủ đề con cho tệp phông chữ và biểu định kiểu của bạn Triển khai ứng dụng của bạn lên Kinsta - Bắt đầu với Khoản tín dụng $20 ngay bây giờChạy nút của bạn. js, Python, Go, PHP, Ruby, Java và Scala (hoặc hầu hết mọi thứ khác nếu bạn sử dụng Dockerfiles tùy chỉnh của riêng mình), trong ba bước đơn giản Triển khai ngay bây giờ và nhận $20 giảm giáKhi bạn đã hoàn thành việc đó, bạn sẽ cần thêm phông chữ vào biểu định kiểu của mình Thêm (các) Phông chữ trong CSSMở biểu định kiểu của chủ đề của bạn Thêm mã như thế này, thay thế phông chữ tôi đã sử dụng bằng phông chữ của riêng bạn
Thêm bất kỳ chi tiết nào bạn cần. Lưu ý rằng nếu bạn muốn sử dụng chữ đậm, chữ nghiêng, v.v. các biến thể của phông chữ của bạn, bạn cần khai báo từng cái bằng cách sử dụng 5 và sau đó chỉ định trọng lượng hoặc kiểu cho từng loại, như tôi đã làm ở trên với Raleway cho các loại đậm và bình thườngBây giờ, hãy thêm kiểu dáng cho các phần tử của bạn, giống như khi bạn sử dụng phông chữ web
Các phông chữ được lưu trữ cục bộ của bạn giờ đây sẽ hoạt động với chủ đề của bạn Cách thay đổi phông chữ trong WordPressBây giờ bạn đã biết cách cài đặt phông chữ trong trang web WordPress của mình theo một trong hai cách. Làm thế nào về việc chỉnh sửa chúng? Bạn có thể chỉnh sửa phông chữ của mình theo một trong ba cách. thông qua Trình tùy chỉnh, trong màn hình chỉnh sửa bài đăng hoặc trang hoặc sử dụng CSS Hãy xem xét từng tùy chọn để thay đổi kiểu phông chữ, màu sắc và kích thước Cách thay đổi kiểu phông chữ trong WordPressHãy xem cách chúng tôi có thể thực hiện cả hai điều đó nếu bạn đang sử dụng Trình chỉnh sửa khối hoặc Trình chỉnh sửa cổ điển Thay đổi kiểu phông chữ trong Block Editor (Gutenberg)Nếu bạn đang sử dụng phiên bản WordPress mới nhất với trình chỉnh sửa Gutenberg, bạn có thể thay đổi kiểu văn bản khi chỉnh sửa nó trong bài đăng hoặc trang của mình Chọn khối bạn muốn chỉnh sửa và menu kiểu dáng sẽ xuất hiện phía trên khối đó Kiểu dáng khối GutenbergChọn đoạn văn bản muốn sửa rồi click vào các biểu tượng để in đậm hoặc in nghiêng. Nếu bạn nhấp vào mũi tên bên cạnh những mũi tên đó, bạn sẽ thấy rằng bạn cũng có thể chọn gạch ngang Gạch ngang ở GutenbergThay đổi kiểu phông chữ trong Trình chỉnh sửa cổ điểnNếu bạn đang chạy phiên bản WordPress cũ hơn hoặc bạn đã cài đặt plugin Trình chỉnh sửa cổ điển, bạn cũng có thể chỉnh sửa kiểu phông chữ. (Nếu bạn không muốn trình chỉnh sửa Gutenberg, tốt hơn hết là cập nhật WordPress và tắt Gutenberg. ) Trình chỉnh sửa cổ điển bao gồm một thanh công cụ phía trên ngăn chỉnh sửa chính nơi bạn có thể thay đổi kiểu văn bản của mình. Nếu bạn nhấp vào biểu tượng Chuyển đổi thanh công cụ ở bên phải, bạn có thể truy cập nhiều tùy chọn hơn, bao gồm cả gạch ngang Thanh công cụ kiểu dáng trình soạn thảo cổ điểnThay đổi kiểu phông chữ trong CustomizerNếu bạn muốn thay đổi kiểu phông chữ cho một phần tử cụ thể, bạn có thể thực hiện việc này bằng cách thêm CSS thủ công vào Trình tùy chỉnh Mở Tùy biến và nhấp vào CSS bổ sung. Điều này sẽ mở ra một màn hình nơi bạn có thể nhập CSS CSS bổ sung trong Tùy biếnBây giờ bạn có thể nhập CSS cho phông chữ của mình vào hộp. Vì vậy, nếu bạn muốn thay đổi tất cả các phần tử h1 và h2 thành chữ in nghiêng, bạn sẽ thêm CSS này
Thay đổi kiểu phông chữ trong biểu định kiểu của bạnNếu bạn cảm thấy thoải mái khi thêm mã vào biểu định kiểu của mình, thì đây là cách tốt hơn để làm điều đó Nếu bạn đang sử dụng chủ đề của bên thứ ba, hãy tạo chủ đề con cho phong cách của riêng bạn, nếu không mọi thay đổi bạn thực hiện sẽ bị mất khi bạn cập nhật chủ đề. Bạn sẽ phải tạo một biểu định kiểu trong chủ đề con để nói với WordPress rằng đó là một chủ đề con. đó là nơi bạn đặt kiểu phông chữ mới của mình Nếu đang sử dụng chủ đề của riêng mình, bạn có thể chỉnh sửa và sửa đổi CSS trong biểu định kiểu của riêng mình. Các tập tin là phong cách. css và bạn sẽ tìm thấy nó trong thư mục chủ đề của mình ở wp-content/themes Thêm bất kỳ kiểu phông chữ nào vào cuối biểu định kiểu của bạn để nó không bị hủy bỏ bởi bất kỳ thứ gì đã có. Hoặc thậm chí tốt hơn, xóa và ghi đè bất kỳ kiểu phông chữ hiện có nào, trừ khi bạn muốn giữ lại nó Thay đổi trọng lượng của một phần tử với trọng lượng phông chữ 0Thay đổi kiểu của một phần tử với kiểu phông chữ 1Thay đổi căn chỉnh bằng text-alignment Mệt mỏi vì một máy chủ chậm cho trang web WordPress của bạn? . Kiểm tra các kế hoạch của chúng tôi 2Cách thay đổi màu phông chữ trong WordPressMột thay đổi khác mà bạn có thể muốn thực hiện là thay đổi màu của một số văn bản trong trang web của mình. Coi chừng đi quá đà với điều này. chủ đề của bạn đã được thiết kế với các màu phối hợp ăn ý với nhau và nếu bạn thêm quá nhiều màu, chủ đề có thể trông lòe loẹt và không chuyên nghiệp Thay đổi màu chữ trong GutenbergKhối văn bản Gutenberg cho phép bạn chỉnh sửa màu văn bản và nền. Để thực hiện việc này, hãy mở khối bạn muốn sửa đổi và nhấp vào tab Cài đặt màu trong phần Khối ở bên phải màn hình Tab cài đặt màuTừ đây bạn có thể chỉnh sửa màu nền và màu chữ cho khối văn bản Màu tùy chỉnh trong một khốiLưu ý rằng WordPress sẽ cảnh báo bạn nếu sự kết hợp màu sắc bạn sử dụng không tốt cho khả năng truy cập, chẳng hạn như trong ví dụ tôi đã sử dụng ở trên. Tránh sự cám dỗ để quá nhiệt tình với màu sắc của bạn – sau tất cả, bạn đã chọn chủ đề của mình vì thiết kế màu sắc của nó phù hợp với trang web của bạn và việc thêm nhiều màu sắc hơn có thể khiến nó trông sặc sỡ Nếu bạn nhấp vào tab Nâng cao bên dưới tab Cài đặt màu, bạn cũng có thể thêm một lớp vào khối đó, sau đó bạn có thể tạo kiểu cho lớp này trong Tùy biến hoặc biểu định kiểu của bạn. Vì vậy, ví dụ: nếu bạn đã thêm một lớp 6 vào khối của mình, thì bạn có thể tạo kiểu cho nó bằng cách sử dụng lớp đóThay đổi màu phông chữ trong Trình chỉnh sửa cổ điểnThanh công cụ của trình soạn thảo cổ điển cho phép bạn thay đổi màu của bất kỳ văn bản nào bạn chọn. Vì vậy, bạn có thể chọn một từ riêng lẻ và thay đổi màu sắc của nó. Dưới đây tôi đã thực hiện một câu màu đỏ Thay đổi màu sắc trong trình chỉnh sửa cổ điểnMặc dù về mặt lý thuyết, điều này mang lại cho bạn rất nhiều sự linh hoạt, nhưng hãy cẩn thận khi lạm dụng nó. Nếu bạn bắt đầu thêm nhiều màu hơn vào văn bản của mình, điều đó có thể dẫn đến một trang web khó đọc và không tốt cho khả năng truy cập Thay đổi màu phông chữ trong CustomizerNếu chủ đề của bạn bao gồm các tùy chọn để thay đổi bảng màu của trang web, thì đây là nơi tốt nhất để làm điều đó Ví dụ: trong trang web bên dưới, tôi đang sử dụng một chủ đề cho phép tôi chọn bảng màu mới cho toàn bộ chủ đề. Điều này giúp đảm bảo các màu mới phối hợp ăn ý và thống nhất với nhau Các tùy chọn cho điều này sẽ thay đổi tùy theo chủ đề của bạn – một số chủ đề cho phép bạn nhắm mục tiêu các tiêu đề, liên kết và các yếu tố khác cũng như thay đổi màu sắc của chúng Nếu bạn muốn nhắm mục tiêu các phần tử cụ thể để thay đổi màu của chúng nhưng đây không phải là một tùy chọn với chủ đề của bạn, bạn có thể thêm CSS trong Trình tùy chỉnh để thực hiện việc này Chọn Tùy chỉnh > CSS bổ sung và nhập CSS của bạn vào hộp văn bản Ví dụ: nếu bạn muốn thay đổi màu của tiêu đề 0, bạn nhập 3Nếu cách đó không hiệu quả, bạn có thể cần thêm CSS cụ thể hơn. Trong chủ đề của tôi, màu sắc cho liên kết tiêu đề trang web được mã hóa bằng cách sử dụng 8ID, vì vậy tôi cần thêm CSS này 4CSS bổ sung – màu sắcThay thế màu tôi đã sử dụng ở trên bằng màu của riêng bạn Khi bạn hài lòng với những thay đổi của mình, hãy nhấp vào nút Xuất bản Thay đổi màu phông chữ trong biểu định kiểu của bạnĐối với các kiểu phông chữ, bạn cũng có thể chỉnh sửa biểu định kiểu của chủ đề (hoặc tạo một chủ đề con) để thay đổi màu phông chữ Thay đổi màu sắc với màu sắc. Dưới đây tôi đang thay đổi màu chính cho văn bản trang web của mình, sử dụng phần tử 9 5Đảm bảo rằng bạn ghi đè bất kỳ kiểu dáng hiện có nào cho các thành phần giống nhau và bạn cũng tạo kiểu cho bất kỳ thành phần nào kế thừa kiểu dáng đó nếu bạn muốn chúng có màu khác. Tất cả văn bản sẽ kế thừa màu sắc của phần tử nội dung trừ khi phần tử đó có kiểu riêng Thay đổi kích thước phông chữ trong WordPressVì lý do trợ năng, bạn có thể quyết định muốn phông chữ của mình lớn hơn phông chữ theo mặc định trong chủ đề của bạn. Hoặc bạn có thể quyết định các tiêu đề trong khu vực widget của mình quá nhỏ, chẳng hạn Thay đổi kích thước phông chữ trong GutenbergVới trình chỉnh sửa Gutenberg, bạn có thể thay đổi kích thước của văn bản trong mỗi khối Chọn khối rồi nhấn vào tab Cài đặt văn bản trong menu Khối bên phải màn hình. Bạn có thể làm cho văn bản trong khối nhỏ hơn hoặc lớn hơn, như hình bên dưới Chỉnh sửa kích thước phông chữ trong GutenbergCoi chừng làm điều này quá nhiều. nếu tất cả các đoạn trên trang của bạn có kích thước khác nhau, nó sẽ trông rời rạc và khó đọc Thay đổi kích thước phông chữ trong Trình chỉnh sửa cổ điểnTrình chỉnh sửa cổ điển không cung cấp cho bạn tùy chọn để chọn văn bản cụ thể và thay đổi kích thước của nó. vì vậy nếu bạn cần tính năng này, bạn sẽ cần nâng cấp lên Gutenberg. Xin lỗi Thay đổi kích thước phông chữ trong CustomizerTùy thuộc vào chủ đề của bạn, bạn có thể có tùy chọn thay đổi kích thước phông chữ trong Tùy biến, thay đổi kích thước phông chữ cho toàn bộ trang web hoặc nhắm mục tiêu tiêu đề và văn bản nội dung Nếu chủ đề của bạn không có tùy chọn Tùy chỉnh để thay đổi kích thước phông chữ, nhưng bạn có thể sử dụng tùy chọn CSS bổ sung. Chuyển đến Tùy chỉnh > CSS bổ sung rồi nhập CSS vào hộp Dưới đây tôi đang làm cho các tiêu đề trong khu vực widget lớn hơn, với CSS này 6Tạo kiểu cho kích thước phông chữ bằng CSS bổ sungCó lẽ đó là một chút quá lớn, nhưng nó cung cấp cho bạn ý tưởng chung Thay đổi kích thước phông chữ trong biểu định kiểu của bạnThay đổi kích thước phông chữ trong biểu định kiểu của bạn hoạt động theo cách tương tự như thay đổi bất kỳ kiểu dáng nào khác cho phông chữ của bạn Nếu bạn muốn thay đổi kích thước của tất cả văn bản trong trang web của mình, bạn sẽ sử dụng phần tử 9 7Đối với phần tử 9, bạn sử dụng pixel, nhưng đối với các phần tử khác, bạn sử dụng 2 vì vậy kích thước tương ứng với kích thước của phần tử 9 8Hãy nhớ rằng nếu bạn định thay đổi phông chữ trong biểu định kiểu chủ đề của mình, trước tiên hãy kiểm tra nó trên một trang web phát triển hoặc dàn dựng để bạn không gặp rủi ro làm hỏng trang web trực tiếp của mình Cách tối ưu hóa phông chữ trong WordPressCho dù bạn đang sử dụng phông chữ trên web hay phông chữ được lưu trữ cục bộ, bạn nên làm mọi thứ có thể để tối ưu hóa phông chữ của mình Ở đây tôi sẽ cung cấp cho bạn một số mẹo để tối ưu hóa phông chữ của bạn, cả về tốc độ và thiết kế Tối ưu hóa phông chữ cho hiệu suấtNếu bạn đang sử dụng phông chữ web trên trang web của mình, bạn sẽ muốn làm mọi thứ có thể để đảm bảo rằng chúng được gửi đến các trang của bạn nhanh nhất có thể và thực tế là chúng được lưu trữ ở nơi khác không làm chậm mọi thứ
Vì vậy, nếu tiêu đề trang web của bạn là Kinsta, bạn có thể cải thiện hiệu suất nhỏ bằng cách tạo biểu định kiểu như thế này 9Tối ưu hóa phông chữ cho thiết kếCùng với việc tối ưu hóa hiệu suất phông chữ của bạn, bạn cũng nên đảm bảo rằng chúng được tối ưu hóa trực quan. rằng chúng phù hợp tốt với thiết kế trang web của bạn và với các tài liệu ngoại tuyến của bạn Điều này đặc biệt xảy ra nếu bạn sử dụng một plugin hoặc một chủ đề con để thêm các phông chữ bổ sung lên trên những phông chữ đã có sẵn trong chủ đề của bạn. Chủ đề của bạn có nguy cơ trông lộn xộn nếu có quá nhiều phông chữ với quá nhiều màu sắc và kiểu dáng Trước khi bạn thêm phông chữ bổ sung vào trang web của mình, hãy xem xét những điều sau
Các phông chữ bạn sử dụng trong thiết kế của mình sẽ có tác động đến ấn tượng mà khách truy cập nhận được khi họ truy cập trang web của bạn. Hãy chắc chắn rằng bạn đã xem xét điều này và chọn phông chữ sẽ củng cố thương hiệu của bạn Làm việc với phông chữ biếnPhông chữ biến đổi là một loại phông chữ mới giúp thêm nhiều phông chữ hơn vào trang web của bạn hiệu quả hơn Chúng cho phép lưu trữ nhiều thông tin hơn trong một tệp phông chữ, để nếu bạn muốn các biến thể trên phông chữ của mình (đậm, nghiêng, v.v. ), bạn không phải tải nhiều tệp phông chữ mà chỉ có thể tải một tệp Đối với một phông chữ có nhiều trọng lượng, kiểu và độ nghiêng phông chữ, điều này có thể tiết kiệm rất nhiều dung lượng tệp và làm cho quá trình xử lý phông chữ hoặc thêm nó qua @fontface cũng dễ dàng hơn Các phông chữ biến đổi được hỗ trợ trong các phiên bản mới nhất của Chrome, Edge, Firefox và Safari nhưng không được hỗ trợ bởi các trình duyệt cũ hơn; . Và chưa có nhiều phông chữ biến đổi. Google Fonts không bao gồm bất kỳ Phông chữ nào, nhưng Google hỗ trợ thông số kỹ thuật, vì vậy có khả năng chúng sẽ được thêm vào theo thời gian Các nhà phát triển phông chữ đang nỗ lực tạo ra nhiều phông chữ biến đổi hơn và cải thiện độ tin cậy của chúng, vì vậy, rất đáng để theo dõi tiến trình để bạn có thể sử dụng các phông chữ biến đổi nhằm tối ưu hóa phông chữ của mình sau khi chúng trở nên ổn định hơn Phông chữ được coi là đương nhiên nhưng chúng rất quan trọng đối với BẤT KỲ trang web nào (không có ngoại lệ). Tìm hiểu cách thay đổi phông chữ, cỡ chữ và màu chữ trong WordPress. 🎨👨👦Nhấp để TweetTóm lượcThay đổi phông chữ trên trang web WordPress của bạn không phải là một nhiệm vụ đơn giản. Bạn có các khả năng khác nhau để lựa chọn
Sau đó, bạn nên tập trung vào cách tối ưu hóa phông chữ của mình để có hiệu suất tốt hơn. Nếu bạn làm theo các mẹo trong hướng dẫn này, bạn không chỉ có thể thay đổi phông chữ trong WordPress mà còn có nhiều quyền kiểm soát hơn đối với chúng trong chủ đề của mình Bạn muốn giải mã bố cục trang hoặc blog của mình để khiến người đọc tập trung vào nội dung của bạn? . Cách xóa thanh bên trong WordPress (4 phương pháp) Nhận tất cả các ứng dụng, cơ sở dữ liệu và trang web WordPress của bạn trực tuyến và dưới một mái nhà. Nền tảng đám mây hiệu suất cao, đầy đủ tính năng của chúng tôi bao gồm
Hãy tự kiểm tra với $20 trong tháng đầu tiên của Lưu trữ ứng dụng hoặc Lưu trữ cơ sở dữ liệu. Khám phá kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm thấy sự phù hợp nhất của bạn Làm cách nào để thay đổi phông chữ trên WordPress?Cách thay đổi phông chữ trong WordPress . Đăng nhập vào tài khoản WordPress của bạn. . Nhấp vào Giao diện ở thanh bên trái Sau đó nhấp vào Tùy chỉnh Nhấp vào Phông chữ trong bảng điều khiển bên trái. . Chọn tiêu đề và phông chữ cơ sở của bạn. . Bạn cũng có thể thay đổi kích thước phông chữ bằng cách nhấp vào nút “Kích thước bình thường” trong trình đơn thả xuống Tiêu đề Tại sao phông chữ văn bản của tôi không thay đổi trong Elementor?Xóa tất cả bộ đệm . bộ đệm của trình duyệt của bạn, bộ đệm của các plugin khác, bộ đệm của máy chủ (nếu có thể). Nếu sự cố vẫn tiếp diễn, hãy hủy kích hoạt tất cả các plugin ngoài Elementor. Nếu điều này hữu ích, hãy kích hoạt lại từng cái một để tìm ra thủ phạm. |