2012-12-11 50 views
7

Tôi đang cố gắng sử dụng phông chữ google web mở sans với bootstrap.Hiển thị phông chữ web sans google với bootstrap?

Tôi tải phông chữ với:

Tôi có một trang web specific.css rằng tải sau bootstrap. Tôi đã thử:

.body { font-family: 'Open Sans', sans-serif;} 

và cũng:

.bootstrap-container *,  
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font { 
font-family: 'Open Sans', sans-serif; 
} 

Nhưng có vẻ như không có vấn đề gì lớp chọn tôi sử dụng, các phông chữ không render và các phông chữ bootstrap được thừa kế để thay thế. Tôi không chắc chắn làm thế nào để gỡ lỗi này.

+0

Tại sao bạn không chỉ tùy chỉnh Bootstrap? – SLaks

Trả lời

4

Sử dụng CSS !important

.bootstrap-container *,  
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font { 
font-family: 'Open Sans', sans-serif !important; <-------- Here 
} 
+0

! Quan trọng không có bất kỳ ảnh hưởng nào đến kết xuất được hiển thị. –

9

Miễn là bạn đã không thay đổi các tập tin cốt lõi của Bootstrap, tôi sẽ làm cho dễ dàng hơn này về bản thân và sử dụng "tùy chỉnh" tính năng của họ. Tải xuống lại sau khi đặt tên phông chữ của bạn và thay thế các tệp khởi động hiện có của bạn bằng các tệp mới.

Bạn có thể tùy chỉnh nó ở đây:

http://getbootstrap.com/customize/

Việc làm này ít nhất sẽ đảm bảo rằng bạn không bỏ lỡ một cái gì đó ... và xin vui lòng, tránh sử dụng !important như gợi ý ở trên (trừ khi bạn thực sự cần). Hy vọng điều đó sẽ giúp ích?

+1

chỉ cần chèn 'Open Sans' vào ô @sansFontFamily trên trang tùy chỉnh trước khi tải xuống và đừng quên đưa liên kết từ google webfonts api vào phần đầu tài liệu của bạn – Pevara

+1

Tôi đang sử dụng bootstrap từ CDN khởi động. Tôi sẽ thử phương pháp này mặc dù. Tôi chỉ không hiểu tại sao các kiểu font thừa kế thừa có vẻ khó khăn như vậy. –

+4

Công việc này có phù hợp với bạn không? Bạn đã xem xét chấp nhận câu trả lời đúng chưa? Điều này sẽ giúp những người khác trong tương lai với các vấn đề tương tự. Cảm ơn. –

Các vấn đề liên quan