Phông chữ đóng vai trò lớn trong việc thể hiện trực quan các ứng dụng   và báo cáo dựa trên web. Theo mặc định, JavaScript cho phép nhà phát triển tùy chỉnh những thứ như kích thước, trọng lượng và kiểu phông chữ và thậm chí bao gồm các loại phông chữ tùy chỉnh. Khả năng các nhà phát triển làm việc và tùy chỉnh phông chữ cho phép họ nâng cao cả tính thẩm mỹ lẫn khả năng đọc thông tin mà họ đang trình bày. JavaScript  Để phù hợp với tính linh hoạt của JavaScript, ActiveReportsJS cho phép người dùng tùy chỉnh nhiều văn bản trong báo cáo. Trong bài viết này, chúng tôi sẽ tập trung vào cách bạn có thể tận dụng khả năng tùy chỉnh phông chữ của ActiveReportsJS Designer, bao gồm các chủ đề sau:  Khái niệm cơ bản về phông chữ  Định cấu hình Ứng dụng Trình thiết kế Độc lập  Định cấu hình các ứng dụng dựa trên ActiveReportsJS  Định cấu hình Thành phần Trình thiết kế Báo cáo  Khái niệm cơ bản về phông chữ  Tất cả các thành phần ActiveReportsJS hoạt động trong môi trường trình duyệt web:    được xây dựng bằng   , sử dụng Chrome để hiển thị giao diện người dùng. Trình thiết kế báo cáo độc lập Electron  Các thành phần Trình thiết   và   là một phần của ứng dụng web chạy trong trình duyệt trên máy của người dùng. kế Trình xem báo cáo JavaScript  Bộ lọc Xuất PDF, Dữ liệu dạng bảng và HTML sử dụng môi trường trình duyệt web để đo lường nội dung báo cáo.  Một báo cáo điển hình bao gồm nội dung văn bản mà trình duyệt hiển thị bằng cách sử dụng các hình dạng được gọi là glyphs. Tài nguyên phông chữ chứa thông tin ánh xạ mã ký tự thành glyphs đại diện cho các ký tự này. Vì vậy, trình duyệt cần truy cập vào tài nguyên phông chữ để hiển thị văn bản như mong đợi.  Tất cả nội dung văn bản trong ActiveReportsJS có một số thuộc tính phông chữ, bao gồm:    : ID phông chữ, tức là Arial, Calabri hoặc Times New Roman. Họ phông chữ    : Bình thường hoặc in nghiêng. Kiểu chữ    : Mỏng, Cực nhẹ, Bình thường, Trung bình, Nửa đậm, Đậm, Cực đậm, Nặng. Độ dày phông chữ  Sự kết hợp độc đáo của ba thuộc tính này được gọi là   . Một họ phông chữ thường bao gồm một số mặt phông chữ, được biểu thị (thông thường) bằng một số tệp. Font Face  Ví dụ: họ phông chữ   có sáu kiểu phông chữ khác nhau:  Calibri  Khi ActiveReportsJS hiển thị một báo cáo, nó sẽ dịch các thuộc tính phông chữ này thành các thuộc tính kiểu CSS font-family, font-style và font-weight. Nó dựa vào trình duyệt để phân giải các tài nguyên phông chữ liên quan và trích xuất các glyph cần thiết. Trình duyệt có hai cách để truy cập tài nguyên phông chữ; cục bộ, trên hệ thống mà trình duyệt chạy hoặc bằng cách tải xuống.  Tài nguyên phông chữ có thể tải xuống rất dễ bảo trì; tất cả các trình duyệt hiện đại đều hỗ trợ chúng và nó đảm bảo đầu ra nội dung văn bản nhất quán trên tất cả các môi trường. Ngoài ra, ActiveReportsJS PDF Xuất yêu cầu các phông chữ có thể tải xuống vì nó nhúng các tập hợp con của chúng vào tài liệu PDF. Do đó, cách tốt nhất để đảm bảo đầu ra báo cáo nhất quán trên tất cả các môi trường là định cấu hình các thành phần ActiveReportsJS để truy cập tài nguyên phông chữ có thể tải xuống.  Trước khi bắt đầu, chúng ta cần quyết định xem mình muốn sử dụng họ phông chữ nào cho báo cáo của mình. Đó có thể là những phông chữ tiêu chuẩn như Arial, Times New Roman hoặc Helvetica. Hoặc, nó có thể là bất kỳ số lượng phông chữ web nào. Trong ví dụ của chúng tôi, chúng tôi sẽ sử dụng phông chữ Montserrat; đây chính là phông chữ mà chúng tôi sử dụng cho các báo cáo demo của mình.  Trong mọi trường hợp, hãy đảm bảo bạn có tất cả các tệp phông chữ cho tất cả họ phông chữ bạn định sử dụng. ActiveReportsJS hỗ trợ các định dạng phông chữ sau:   Định cấu hình Trình thiết kế báo cáo độc lập  Để thêm họ phông chữ vào trình thiết kế độc lập, trước tiên bạn cần điều hướng đến thư mục chứa tệp cấu hình phông chữ ActiveReportsJS. Đây là những vị trí sau, dựa trên hệ điều hành của bạn:    : %AppData%\ActiveReportsJS Designer\fontsConfig.json Windows    : ~/Thư viện/Hỗ trợ ứng dụng/ActiveReportsJS Designer/fontsConfig.json macOS    : ~/.config/ActivereportsJS Designer/fontsConfig.json Linux  Tại vị trí này, tạo một thư mục có tên   và sao chép tất cả các tệp cho tất cả các kiểu phông chữ mà bạn định sử dụng vào thư mục này. Phông chữ  Sau đó, mở tệp   trong trình soạn thảo văn bản bạn chọn. Tệp này chứa các mô tả về chủng loại phông chữ mà tác giả báo cáo sẽ sử dụng cho nội dung văn bản. Trong thuộc tính   , chỉ định đường dẫn tuyệt đối đến thư mục mẹ của thư mục   . Thay thế các mục mặc định của mảng mô tả bằng các mô tả của các mặt phông chữ mong muốn. FontConfig.json đường dẫn Phông chữ  Mỗi bộ mô tả bao gồm các thuộc tính sau:   Ví dụ: để cho phép các mặt Thông thường, Nghiêng và Đậm của phông chữ   , bạn sẽ sử dụng các mô tả sau: Montserrat   { "name": "Montserrat", "weight": "400", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Regular.ttf" }, { "name": "Montserrat", "weight": "400", "style": "italic", "source": "Fonts/Montserrat/Montserrat-Italic.ttf" }, { "name": "Montserrat", "weight": "700", "style": "normal", "source": "Fonts/Montserrat/Montserrat-Bold.ttf" }  Chạy ứng dụng công cụ thiết kế độc lập, thêm TextBox vào nội dung báo cáo và đảm bảo rằng bạn có thể đặt thuộc tính   của nó thành một trong các phông chữ mà bạn đã liệt kê trong tệp   và tất cả các mặt phông chữ đều được hiển thị chính xác. Font Family FontConfig.json  Định cấu hình các ứng dụng dựa trên ActiveReportsJS  Ứng dụng hiển thị báo cáo trong trình xem báo cáo JavaScript, xuất báo cáo sang tệp PDF hoặc lưu trữ thành phần công cụ thiết kế báo cáo phải sử dụng cùng cấu hình mà bạn đã tạo cho ứng dụng công cụ thiết kế độc lập. Cách dễ nhất để đạt được điều đó là sao chép thư mục   và tệp   vào thư mục nội dung tĩnh của ứng dụng của bạn. Phông chữ FontConfig.json  Thư mục này khác nhau tùy theo các khung giao diện người dùng khác nhau. Dưới đây là một vài ví dụ:    : Sử dụng cấu hình tài sản; nếu thư mục   và tệp   được sao chép vào thư mục nội dung, hãy sửa đổi thuộc tính nguồn của bộ mô tả phông chữ trong tệp   để chúng bắt đầu bằng nội dung. Ví dụ: Angular Phông chữ phông chữConfig.json phông chữConfig.json  { "name": "Montserrat", "weight": "900", "style": "italic", "source": "assets/Fonts/Montserrat/Montserrat-BlackItalic.ttf" }    : Sử dụng thư mục chung cho các ứng dụng được tạo bằng ứng dụng tạo phản ứng. React    : Sử dụng xử lý tài sản tĩnh. Vue  Cuối cùng, ứng dụng sẽ gọi phương thức   của đối tượng FontStore bằng URL của tệp   . Mã này sẽ chạy trước khi ứng dụng bắt đầu hiển thị hoặc xuất báo cáo. Lưu ý rằng phương thức   không đồng bộ và trả về một đối tượng   . registerFonts FontConfig registerFonts Promise  Mã gọi phương thức này cũng có thể đợi cho đến khi Promise trả về này được giải quyết trước khi tải báo cáo vào thành phần trình xem hoặc xuất chúng.  Đối với các ứng dụng JavaScript thuần túy, mã sẽ trông như thế này:   <script src="https://cdn.grapecity.com/activereportsjs/2.2.0/dist/ar-js-core.js"></script> <script> GC.ActiveReports.Core.FontStore.registerFonts( "/resources/fontsConfig.json" // replace the URL with the actual one ) </script>  Đối với các ứng dụng   ,   và Vue: Angular React   import { Core } from "@grapecity/activereports"; Core.FontStore.registerFonts("/assets/fontConfig.json") // replace the URL with the actual one  Bạn có thể tìm thấy các ví dụ về mã này trong   của chúng tôi. các bản demo trực tiếp  Định cấu hình Thành phần Trình thiết kế Báo cáo  Cuối cùng, để đảm bảo rằng thành phần thiết kế báo cáo chỉ hiển thị các phông chữ đã đăng ký, hãy đặt thuộc tính   của phiên bản trình thiết kế thành đã đăng ký. fontSet  Ngoài ra, nếu bạn muốn đảm bảo rằng các mục báo cáo mới được thêm vào có một trong các phông chữ đã đăng ký theo mặc định, bạn có thể sử dụng tính năng   . Mẫu ban đầu tùy chỉnh  Phần kết luận  Và với điều đó, chúng ta đã đi đến cuối bài viết. Như chúng ta đã thảo luận, phông chữ là một cách hiệu quả để các nhà phát triển nâng cao tính thẩm mỹ và khả năng đọc. Trong bài viết này, chúng tôi đã cho thấy việc kết hợp phông chữ tùy chỉnh vào báo cáo của bạn dễ dàng như thế nào thông qua Trình thiết kế và xem báo cáo ActiveReportsJS.  Chúc mừng mã hóa!  Cũng được xuất bản   . ở đây

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Learn More About MESCIUS' Line of Products!

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Make resilience your competitive advantage

Sử dụng phông chữ tùy chỉnh trong báo cáo JavaScript

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

309 Stories To Learn About Smart Contracts

223 Stories To Learn About Science

72 Stories To Learn About Adam Smith

128 Stories To Learn About Charles Dickens

309 Stories To Learn About Smart Contracts

223 Stories To Learn About Science

72 Stories To Learn About Adam Smith

128 Stories To Learn About Charles Dickens

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps