Xây dựng biểu tượng phông chữ tuyệt vời

Question

Tôi sẽ tạo các biểu tượng phông chữ tuyệt vời của riêng mình. Đặc biệt tôi sẽ xây dựng một cái gì đó mà là một bản sao của font-awesome với tất cả các tính năng của nó, nhưng chỉ sử dụng một tập hợp con của các biểu tượng.

Hơn nữa, tôi thực sự quan tâm đến cách họ tạo tệp trong các thư mục phông chữ. Trên github tôi tìm thấy số này repo, chứa tất cả các biểu tượng svg. Trên ubuntu, sử dụng Font Custom, tôi đã có thể tạo ra các tệp svg làm đầu vào, tệp phông chữ, ngay cả khi tôi không thực sự hài lòng. Nhưng bên cạnh đó, tôi không hiểu cách hợp nhất những tệp đó với phông chữ tuyệt vời.

Tóm tắt, làm cách nào tôi có thể tạo tập hợp phông chữ tuyệt vời của riêng tôi bằng cách sử dụng các tệp svg của riêng mình?

Vui lòng không nói sử dụng fontello, icoMoon hoặc similars, vì tôi muốn thực hiện trên máy cục bộ của mình mà không có bất kỳ dịch vụ của bên thứ ba nào.

Answer 1

Tôi tin rằng bạn có thể sử dụng FontLab Studio cho rằng: http://store.fontlab.com/

Tuy nhiên, có thể bạn sẽ phải viết css riêng của bạn, cá nhân tôi nghĩ rằng tạo ra nó với icomoon hoặc tương tự web máy phát điện dựa là dễ dàng hơn và nhanh hơn, vì nó được tạo ra đặc biệt để tạo phông chữ web, trước khi FontLab Studio hoặc các ứng dụng máy tính để bàn tương tự được tạo ra để thiết kế phông chữ cho máy tính để bàn và không đi kèm với trình biên dịch/trình tạo css được dựng sẵn.

Tôi muốn xem máy phát điện cho máy tính để bàn.

Answer 2

Tôi thực sự đã làm một cái gì đó tương tự nhưng phải thừa nhận nó không bao giờ hoàn hảo, rất có thể do chuyển đổi phông chữ xấu, chỉ cần không bao giờ có thời gian để làm cho nó hoàn hảo. Về cơ bản tôi sử dụng liên kết sau (đối với hầu hết các phần)

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/

Tổng quan về quá trình

Bước 1 - Tạo gylphs cá nhân (bạn nên sử dụng các ký tự đặc biệt để tránh một người nào đó "nhập" bằng cách sử dụng phông chữ của bạn

Bước 2 - Lưu lựa chọn gylphs làm phông chữ SVG.

Bước 3 - Chuyển đổi font chữ SVG tới web-font (có rất nhiều bộ chuyển đổi trực tuyến miễn phí)

bước 4 - tạo ra các lớp CSS để sử dụng (tạo ra tất cả các lớp học có thể cho tất cả các glyphs cá nhân) - kết quả sẽ giống như: "icon icon-lg icon-blue icon-hand" - (tốt hơn khi sử dụng LESS/SCSS cho phần này - bạn sẽ nhận được lý do sau) trong đó có chứa cài đặt chung cho tất cả các biểu tượng, các điều khiển khác kích thước ghi đè, một điều khiển màu sắc và điều quan trọng nhất là sử dụng: sau -> xuất ra biểu tượng.

bước 5 - bây giờ bạn có phông chữ web đang hoạt động được kiểm soát bởi CSS, hãy tạo giao diện người dùng để chọn hình tượng riêng lẻ có sẵn. rất có thể bạn nên sử dụng LESS, theo cách này bạn đang "phơi bày" chỉ những lớp được người dùng chọn (EG.- icon-1, 2, 5, 8 vv) tất cả các biểu tượng khác vẫn được bao gồm trong phông chữ nhưng các lớp CSS tương ứng của chúng không được xuất trong CSS cuối cùng.

Có thể có nhiều cách nâng cao hơn để làm điều đó nhưng tổng quan và hướng dẫn này sẽ giúp bạn có được những điều cơ bản.

Answer 3

Tôi chưa đào sâu với các bộ biểu tượng phông chữ riêng, nhưng tôi cho rằng có một số dữ liệu svg đang được sử dụng.

Cũng giống như một ý tưởng về một cách khác nhau để Go- bạn thậm chí có thể sử dụng background-img trên lớp thiết lập: trước /: sau

tài nguyên hữu ích: http://iconizr.com/ Tôi thấy thế hệ dữ liệu url của họ là hữu ích (svg tốt hơn chuyển đổi hơn fontello, icoMoon)