Trình Bày Font Chữ

[Matthias Briggs]

Cập nhật 2020-03-01: Bi viết ny mnh viết cũng đ lu nhưng n vẫn c lượt view cao trn trang blog ny, nn mnh quyết định bổ sung thm một số bộ font code đẹp mới vo đy thay v viết bi khc. Cc bộ font mnh bổ sung ở cuối bi.

Bạn c biết trnh soạn code của mnh đang dng font chữ g khng? t người quan tm đến điều ny nhưng việc lựa chọn font chữ cho code editor cũng ảnh hưởng t nhiều đến hiệu suất cng việc của lập trnh vin v bạn phải nhn những dng code nhiều giờ trong một ngy lm việc.

Ligature: đy l hiện tượng nối nhiều chữ thnh một xuất hiện cng với kỹ thuật in ấn trong một số ngn ngữ tự nhin. Trong thời đại số ha, ligature cũng được m phỏng lại (chủ yếu l v l do mỹ thuật) thng qua một số font chữ c hỗ trợ. Ligature cũng đ được hỗ trợ trn cc trnh duyệt hiện đại v đặc biệt l từ IE 10 trở về sau.

Một số font code mới đy đ bắt đầu hỗ trợ ligature cho tổ hợp cc k tự ton tử v k hiệu gip cho việc hiển thị chng trực quan hơn. Trong số đ l bộ font Fira Code được dựng với rất nhiều tổ hợp ligature cho lập trnh.

Tuy nhin Fira Code (v cả Fira Mono m n dựa trn) khng c cc k tự tiếng Việt Unicode. Để khắc phục, bạn c thể sử dụng một font khc lm fallback kh giống Fira Code đ l Roboto Mono.

Hiện nay đ c một số code editor hỗ trợ ligature, trong đ c VSCode v Atom. Rất tiếc l Sublime Text 3 chưa hỗ trợ, v tnh năng ny đang được đặt hng cho nh pht triển ST3. Sublime Text 3 kể từ build 3145 cũng đ hỗ trợ ligature.

Font ny khng mới v cn thiếu một số k tự tiếng Việt, tuy nhin n kh đẹp v rất giống Menlo (font mono space của HĐH Mac trước đy). N cũng l font mặc định của trang carbon.now.sh dng để tạo ảnh chụp cc đoạn code để chia sẻ ln MXH.

Đy l font monospace trong gia đnh font Plex được thiết kế lm font thương hiệu cho IBM. Theo mnh đy l một trong những font cho code editor hon hảo nhất (nếu khng kể đến ligature): hon ton hỗ trợ tiếng Việt, c tất cả weight từ 100 đến 700, c kiểu in nghing ring theo từng weight v đặc biệt cc k tự in nghing a, i, f, bay bướm theo phong cch của Operator Mono trng rất g v ny nọ ;)

Đy l font được thiết kế để hiển thị trong ứng dụng Terminal mới của Windows v cũng sẽ dần dần được sử dụng lm font monospace mặc định trong cc sản phẩm của Microsoft. Font ny nhn tổng thể kh bay bướm nhưng dễ đọc như Operator Mono. Với phin bản hiện tại, n hỗ trợ tốt tiếng Việt v ligature. Tuy nhin, hiện tại n chỉ c mỗi weight regular v khng c kiểu in nghing ring.

Ghi ch nhỏ: Cc font chữ cho lập trnh dưới đy c thể download miễn ph từ internet. Nếu muốn nhanh hơn nữa, hy điền email của bạn vo form bn dưới, Ehkoo sẽ gửi chng đến tận tay cho bạn!

CamingoCode được pht triển từ CamingoMono, c nt chữ thanh mảnh, ph hợp với cả hai mu nền sng v tối. Font ny bao gồm 4 định dạng: Regular, Bold, Italic v BoldItalic.Nhược điểm: CamingoCode khng hỗ trợ ligatures.

Fantasque Sans Mono vốn c tn l Cosmic Sans Neue Mono nhưng v mọi người qu ght Comic Sans nn ght ly lun font Cosmic Sans Neue ? D sao, Fantasque Sans Mono cũng rất nổi bật với những nt cong mềm mại.

Font Fira Mono của Mozilla cực k phổ biến. Font ny thuộc họ Fira, vốn được pht triển cho Firefox OS nn bn cạnh kiểu chữ monospace cn c cả kiểu chữ c chn serif v khng chn sans-serif.Fira Code l một bản mở rộng của Fira Mono được thực hiện bởi @tonsky, hỗ trợ thm cc ligatures.

L một phần trong bộ font chuẩn của IBM, IBM Plex được thiết kế để đp ứng yu cầu của tập đon trong thời đại mới v thể hiện tinh thần, niềm tin cũng như những nguyn tắc thiết kế của cng ty (l g th khng r ?). IBM Plex Mono chưa hỗ trợ ligatures.

Input được David Jonathan Ross thiết kế ring cho mục đch lập trnh. Khoảng cch giữa cc k tự trong Input kh rộng, dấu cu được thiết kế để dễ phn biệt, v Input hỗ trợ đầy đủ cc font weights: từ thin, extra light đến bold.

Iosevka c thể ni l font chữ ngon lnh cnh đo nhất m Ehkoo kiếm được trong năm qua. Khng qu mềm mại như Fantasque Sans Mono, cũng khng qu cứng cp như Ubuntu Mono, Iosevka vừa phải v thanh lịch. Font Iosevka cũng c hỗ trợ ligatures nhưng khng nhiều lắm, chủ yếu l cho cc ton tử trong JavaScript.Iosevka cũng đi km font Iosevka Term dnh ring cho terminal.

Nt của Monoid tương đối mảnh khảnh, v được thiết kế để hướng tới cc mn hnh c độ phn giải thấp. B lại, Monoid hỗ trợ ligatures kh tốt.V, nếu Font Awesome được ci đặt trong my, th Monoid + Font Awesome = Monoisome!

Source Code Pro được pht triển bởi Adobe nn qu nổi tiếng rồi.Thật ra, lu lu đổi qua Source Code Pro cũng được. Chỉ l, theo kiến của Ehkoo th font ny khng c g thực sự nổi bật.

Lập trnh web l cng việc đi hỏi nhiều kĩ năng v kiến thức chuyn mn kh. C rất nhiều phương php để tự học, nhưng đa phần trong số đ đều đ lỗi thời v khng cn c ch cho cc lập trnh vin bởi sự pht triển chng mặt của ngnh cng nghệ ny.

Front End l cch gọi quy trnh sử dụng cc ngn ngữ HTML, CSS, JavaScript thiết kế v xy dựng giao diện cho cc trang web hoặc ứng dụng web để người dng c thể xem v tương tc trực tiếp trn đ.

Mục tiu của việc thiết kế trang web l gip cho người dng dễ dng sử dụng khi mở trang web. Điều ny rất kh khăn v trong thực tế người dụng sử dụng rất nhiều loại thiết bị khc nhau với kch thước v độ phn giải khc nhau, do đ buộc Front End Developer phải xem xt hết cc kha cạnh ny khi thiết kế trang web. Cần phải đảm bảo trang web xuất hiện chnh xc trn cc trnh duyệt khc nhau, hệ điều hnh khc nhau v cc thiết bị khc nhau.

Bước đầu tin bạn cần phải học HTML&CSS, đy l hai ngn ngữ pha client gip bạn tạo giao diện của website. Thường th bạn sẽ nhận một file thiết kế bằng Photoshop (PSD), sau đ bạn sẽ cắt chng ra thnh một file .html v kết hợp với CSS để tạo ra giao diện y hệt như file PSD.HTML sẽ gip hiển thị dữ liệu ở mức đơn sơ, cn CSS sẽ gip trang web hiển thị đẹp v lộng lẫy hơn. Kết quả của bước ny bạn phải nắm vững v cắt được một file PSD sang file HTML nh.

Sau khi bạn đ nắm vững HTML v CSS th nhiệm vụ by giờ l bạn phải học Javascript. Bạn nn nhớ rằng Javascript rất quan trọng khi bạn theo lĩnh vực lập trnh web ni chung v mảng frontend ni ring nh. Bước ny bạn cần nắm vững kỹ thuật lập trnh Javascript căn bản, hiểu được quy trnh hoạt động của Javascript trong một trang HTML, cuối cng l vận dụng n để xử l hnh động trn website.

Javascript sẽ gip bạn tạo một trang web c nhiều hiệu ứng hơn. V dụ tại freetuts bạn thấy cc hai hiệu ứng scroll to top v scroll to bottom chnh l kết quả của Javascript.

jQuery l một thư viện được viết bằng Javascript, điểm mạnh của n l gip bạn rt gọn chương trnh Javascript. Nếu bạn đ học xong phần 2 th bạn sẽ thấy khi thao tc với DOM bằng JS th rất rườm r, c php di dng nn nhn vo chương trnh rất l rối, v vậy việc sử dụng jQuery l rất cần thiết. cho front end

Bootstrap l một thư viện CSS dng để xy dựng giao diện website theo hệ thống grid, n hoạt động theo cơ chế responsive nn hiển thị tốt trn mọi trnh duyệt v thiết bị. Sử dụng bootstrap c rất nhiều lơi thế như: gip bạn xy dựng giao diện nhanh hơn, chạy hầu hết trn cc thiết bị, cập nhật theo cng nghệ mới, những điều ny rất kh nếu bạn tự mnh thực hiện responsive, ring check chạy trn mọi thiết bị v trnh duyệt thi cũng bất ổn rồi

V đẻ tự học lập trnh Font End bạn cần phải tm hiểu rất nhiều điều mới mẻ khc như: Học tool hỗ trợ như SASS, GIT, Học ES6, Học JS Framework, Học React JS, Học Angular

Tự học lập trnh Font End đi hỏi bạn cần phải thực sự muốn học, c đam m v chăm chỉ. Tuy nhin, bạn cũng c thể tham khảo kha học lập trnh Font End của Devpro để qu trnh học được nhanh chng v bi bản hơn. Cam kết c việc lm sau kha học, những học vin yếu sẽ được hỗ trợ học lại MIẾN PH hoặc lựa chọn thực tập tại cng ty 2 thng với cc dự n thực tế: web resort, khch sạn, bn quần o...

Cc chị dạy rất dễ hiểu v nhiệt tnh. Cc kiến thức như trong thực tế khi em đi thực tập tại RikkeiSoft. Cm ơn cc anh chị nhiều ạ. Chc Dev c nhiều học vin hơn nữa.

Học ở DevPro đ gip mnh c nhiều kinh nghiệm lập trnh android thực tế. Tại đy mnh được cc thầy dạy rất chi tiết theo một lộ trnh r rng của dự n cụ thể nn sau ny đi lm mnh rất dễ bắt nhịp với cng việc.

Ti sẽ khng khuyn cc bạn phải đến DevPro để học tập thay v những chỗ khc nhưng ti đ từng l một người giống cc bạn. Ti băn khoăn khng biết chọn nơi đu lm ngọn đn chỉ lối v ti đến với Devpro . Mọi người kh ho đồng , cc thầy cũng cực nhiệt tnh nhưng cũng c vốn kiến thức rất rộng cn lại l phụ thuộc vo sự nỗ lực của cc bạn nữa thi. Cố ln nh.#ATran

c80f0f1006