Font chữ tiếng Việt đẹp-Phông chữ tiếng Việt-Phong chu Vietnam-Fontchu.com blog

Tạo web font tiếng Việt cho website

admin — Mon, 21 Jan 2013 05:03:36 +0000

Có thể các bạn sẽ thắc mắc sao cần phải tạo web font tiếng Việt trong khi website đã có sẵn font hoặc có thể dùng Google font, cufont để tạo font ấn tượng. Tuy nhiên, nhiều website mới, đặc biệt là w0rdpress, có những phông chữ đẹp, ấn tượng nhưng không hỗ trợ tiếng Việt. Vì thế, bài viết này sẽ hướng dẫn tạo webfont ấn tượng và hỗ trợ tiếng Việt cho website của bạn.

Bước 1: Chọn font unicode mà bạn thích, vào đây để chọn: font unicode rồi tải font bạn thích về máy tính

Bước 2: Vào web tạo font, click add font, chọn font bạn mới tải ở bước 1, rồi chọn Expert

Font format: chọn True type, woff, svg, eot

Character Type: các bạn chọn Lowercase, upercase, number…

Unicode table: Chọn Basic latin

Single Characters: thêm cái đoạn sau vào:

àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđÀÁẠẢÃÂẦẤẬ
ẨẪĂẰẮẶẲẴÈÉẸẺẼÊỀẾỆỂỄÌÍỊỈĨÒÓỌỎÕÔỒỐỘỔỖƠỜỚỢỞỠÙÚỤỦŨƯỪỨỰỬỮỲÝỴỶỸĐ

Click vào Agreement rồi chọn download về máy

Bước 3: Copy font vào thư mục “font” trên host của bạn

Bước 4: vào file css (Style.css), thêm đoạn code sau(thay BebasNeueRegular bằng tên font của bạn):

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?iefix') format('eot'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#webfont4Bjy2lJe') format('svg');
    font-weight: normal;}

Bước 5: Bạn muốn font này hiện ở đâu thì thêm thuộc tính font-family=”tên font bạn chọn” vào css của thẻ đó

Từ khóa tìm kiếm:

tạo font chữ đẹp, tạo phông chữ đẹp, font tieng viet dep cho website, font vni corporate, tạo font chữ tiếng việt cho web

Hướng dẫn cách tùy biến font trên website

admin — Fri, 20 May 2011 06:01:38 +0000

Bạn vào nhiều website thấy có nhiều font chữ lạ, độc đáo được trình bày ngay tại website đó(tại heading) mà không dùng ảnh. Bạn tự hỏi làm thế nào để có thể tùy biến font được như vậy? Bài viết này sẽ giới thiệu những cách phổ biến nhất để tùy biến font trên website sử dụng Google Font, Cufont…

Tùy biến font chữ trên web sử dụng Google Font

Không cần tải về và lưu font ở server của mình, không cần quá lo lắng về việc hiển thị, với Google Font API, công việc rất đơn giản: Tìm font trong thư viện, copy link vào trong phần head của website và sử dụng nó!

Ví dụ:

Google Font hiển thị tốt cả trên các trình duyệt IE. Với cách sử dụng rất đơn giản này, chúc các bạn sẽ có nhiều website đẹp hơn với font chữ được tùy biến.

Nguồn bài viết: http://ntuts.com/huong-dan/tuy-bien-font-tren-web-voi-google-font-api

Tùy biến font chữ trên web sử dụng Cufont:

Bước 1 – Tạo font:

Trước hết, bạn cần download cufon, và sử dụng công cụ generator của Cufón để tạo và tùy biến cách mà font được thể hiện. Tôi rất ấn tượng với các lựa chọn mà Cufón cung cấp khi tạo font. Sau khi tạo xong bạn sẽ có được link download file javascript với các thông tin về font mà Cufón có thể đọc nó. (Ở đây tôi dùng font Comfortaa)

Bước 2: Thêm vào website

Thêm Cufón và font bạn vừa tạo vào website

Theo tôi bạn không nên chọn thay thế quá nhiều text trên website (nó sẽ tốn nhiều tài nguyên của client) mà chỉ nên chọn cho các tiêu đề chính. Để thay thế bạn thêm vào đoạn mã sau:

Như vậy, các thẻ h2, h3 đã được áp dụng font chữ tùy biến.

Nguồn bài viết: http://ntuts.com/huong-dan/thay-the-font-su-dung-cufon

Chúc bạn thiết kế những website đẹp dựa trên hướng dẫn tùy biến font trên đây!

Từ khóa tìm kiếm:

cufon tieng viet, google font, font chu cho web, FONT TIẾNG VIỆT CHO WEB, font tren web

25 Fonts For Web-Design

admin — Sun, 19 Apr 2009 05:57:37 +0000

An incredible showcase of 25 great sans-serif fonts. Every font is available free of charge for non-commercial use:

1) Estrya’s Handwriting

2) Grey Magus

3) RaiElegant.TTF

4) Secret

5) 18th century handwriting font

6) Universal Fruitcake

7) Colaborate

MUSEO – SANS

9) PT SANS

10) MONIKA

11) Ballpark

12) ArtBrush

13) BEBAS

14) Existence Light

15) MOLOT

16) Fertigo Pro

17) UglyQua

18) Gentium Basic

19) BONVENOCF

20) LUXI Sans

21) UBUNTU Titling

22) Learning Curve Pro

23) Aquiline

24) BURNSTOWN DAM

25) Joyce

Từ khóa tìm kiếm:

font chu design, font vni design, font web đẹp, Font for web design, phong chu design

Incredible Typographic Portraits

admin — Sun, 12 Apr 2009 17:27:06 +0000

Original post Click here

Obama Posters

Obama Poster 1

Obama Poster 2

Obama Poster 3

Obama Poster 4

Obama Poster 5

Obama Poster 6

Well, you have seen nothing yet!!! Look at these amazing typographic faces.

Poster 1

Poster 2

Poster 3

Poster 4

Poster 5

Poster 6

Poster 7

Từ khóa tìm kiếm:

kieu chu graffiti, poster, poster chữ, poster đẹp, font posters

40 Creative Typefaces

admin — Sat, 11 Apr 2009 21:01:45 +0000

Original post: Click here

Destructive Vintage TyPO experiment

Rolka

Six Degree

Eyelash Typeface

viki font

Typo-graphic Dope

Cubic

Colo

Cube

Smoke + Type

Blou

in Love

isometrica / type experiment

Cellula Font

Toast Font

PVC Pipe font

Hirsute

A1 paper cut illustration

Exablock

mambo

Dealer

Knife

Pinza

romantique

MadPacman Font

Akimoto typeface

Highheel Typeface

Hairy 5ive Type

Blossomwell

“God Leave Me Alone” typography

Water Weight

Hoax

Mari typeface

Chumbitos

NUMEROBOTS FONT

Blue Plastic Cup Font

A4

NRC Next.One

Money Typography

Kvant

Từ khóa tìm kiếm:

paper font, vintage, plastic font, font tiếng việt vintage, font vintage tiếng việt

Drawing with Typography

admin — Wed, 08 Apr 2009 06:34:24 +0000

Từ khóa tìm kiếm:

typography font

100 Typography Resources

admin — Tue, 31 Mar 2009 04:18:12 +0000

Lists of Great Fonts:

50 Incredible Fonts for Professional Web & Print Design –noupe

75+ Excellent Free Fonts For Professional Design – Tripwire magazine

40+ Excellent Freefonts for Professional Design – Smashing Magazine

80 Beautiful Typefaces for Professional Design – Smashing Magazine

60 Brilliant Typefaces for Corporate Design – Smashing Magazine

30 Fonts that All Designers Must Own – Just Creative Design

Most Popular Free Quality Fonts – Tech Magazine

Great Fonts for Web 2.0 – Modern Life is Rubbish

13 Typefaces Every Graphic Designer Needs – David Airey

25 Best Free Quality Fonts – Vitaly Friedman

21 Most Used Fonts By Professional Designers –DKumar m

Download Fonts:

1001 Free Fonts - 1001 free fonts

Dafont – One of the most popular sources of free fonts

Urban Fonts – More than 8,000 fonts to choose from

Better Fonts – Over 10,000 free fonts

Fawnt – Over 9,000 fonts

RFonts.com – Hundreds of fonts categorized by style

FlashDen – Commercial pixel fonts

Font Freak – 5,000 free fonts and 25,000 commercial fonts

High Fonts – 3,000 free fonts, 25,000 commercial fonts

Better Fonts – 10,000 fonts and counting

Abstract Fonts – 10,000 free fonts

Daily Free Fonts – Thousands of free fonts

SearchFreeFonts – 13,000 free fonts and more that can be purchased

1001 Free Fonts – Nicely categorized

1001 Fonts – Free fonts by category

File Cart – Over 9,000 free fonts

Acid Fonts – Categorized free fonts

Absolute Fonts – Almost 7,000 fonts

The Font Pool – Over 40,000 fonts

Type Now – Currently 6,846 fonts

SimplyTheBestFonts – A lot of different categories to choose from

Fonts 500 – The web’s top 500 free fonts

FontCubes – Over 9,000 free fonts

Free Mac Fonts – Over 6,000 fonts for Macs

WebPagePublicity – Over 6,000 fonts

Phil’s Fonts – Commercial

Fonts for Flash – Commercial

Font Garden – 1,500 fonts not very well categorized

2200FreeFonts – Not categorized

ShowFont – 10,000 fonts only in alphabetical order

GetFreeFonts.info – 2,500 fonts in alphabetical order

Creamundo – Almost 10,000 fonts, but difficult to find what you want

Tools:

Font Tester – View and compare fonts easily

TypeTester – An easy way to compare fonts on-screen

CSSTYPE – Another useful font testing tool

Em Calculator – Converts size in pixels to relative em units, which are based on a text size

Lorem Ipsum – The best tool for creating dummy text

What the Font? – Upload a file and it will identify a font

Colour Contrast Check – Specify a foreground and a background colour and determine if they provide enough of a contrast when viewed by someone having color deficits or when viewed on a black and white screen

FontExplorer X – Free font management software

Designer Plaything – The Standalone Web Typography and Colour Testing Tool

CSS with Vertical Rhythm – Will help you compute CSS that has a consistent vertical rhythm

Baseline Rhythm Calculator – Helps you to generate a stylesheet

Articles:

A Guide to Web Typography – I Love Typography

15 Excellent Examples of Web Typography – I Love Typography

The Anatomy of Web Fonts – SitePoint

The Principles of Beautiful Typography – SitePoint

How to Size Text in CSS – A List Apart

Power to the People: Relative Font Sizes – A List Apart

Typography Matters – A List Apart

The Non-Typographer’s Guide to Practical Typeface Selection – Cameron Moll

5 Simple Steps to Better Typography – Mark Boulton

The Effect of Website Typeface Appropriateness on the Perception of a Company’s Ethos – Usability News

How to Size Text Using Ems – Clagnut

13 Ways of Looking at a Type Face – Design Observer

Typography and Web Advertising: Making Every Opportunity Count – Digital Web Magazine

Better Font Management – Digital Web Magazine

CSS Typography – Digital Web Magazine

15 Tips to Choose a Good Type Text – Typies

Fonts on the Web and a List of Web Safe Fonts – Dustin Brewer

Serif vs. San Serif – KuraFire Network

Web Typography Cheat Sheet – Modern Life

Working with a Limited Font Set on the Web – Modern Life

Typography Tips and Advice for Graphic Design Students – David Airey

Logo Type Guide – RedSun

Typo Tips – The FontFeed

Choosing Type Alignments for the Web – Astheria

Motion Typography: 4 Approaches to Kinetic Text – Wisdump

It’s All About Legibility – Fonts.com

Know Your Type – iStockphoto

The Showcase of BIG Typography – Smashing Magazine

Resources:

Browser Safe Fonts

Top 10 Web Safe Fonts

The Elements of Typographic Style Applied to the Web

Web Typography Style Guide

An Introduction to Font Families and Font Choices

ABC Typography: A Virtual Type Museum

TypeNeu – Typography News

Nice Web Type – Gallery

Typography Crashcourse Roundup

Combined Font Survey Results

Typography for Headlines – Gallery of Headlines

Accessible Web Typography

FontLover

Typography Videos at Yuxt

Typography Glossary

Text Sizing Methods by Browser

Font Classification

TypeNavigator

Typography in the Behance Network

Movie Fonts

Source of this post: Click here

Từ khóa tìm kiếm:

typography, vietnamese typography, download 13000 phông chữ tiếng việt đầy đủ, font chữ tiếng việt typography, Font typograhphy

Demo full fonts VNI, Unicode

admin — Sun, 29 Mar 2009 09:14:08 +0000

Font tiếng Việt mới làm demo full font VNI và Unicode, các bạn có thể xem demo full font VNI ở đây: Demo font VNI, demo full font Unicode ở đây: Demo font Unicode. Có thể xem thêm demo các font khác tại Demo font tiếng Việt.
Khi bạn xem xong demo font, muốn download font bạn cần, hãy vào Danh mục font tiếng Việt rồi tìm font bạn cần download(Ctrl+F và gõ tên font) rồi nhấn vào tên font để download.