Có trình kích hoạt nào tôi có thể sử dụng nếu phông chữ dự phòng được sử dụng trong CSS không?

Question

Tôi đang sử dụng this service để tạo các quy tắc @font-face trong CSS của mình. Những gì tôi đã làm được tạo ra hai quy tắc, một cho các phông chữ trọng lượng bình thường và một cho phiên bản trọng lượng đậm. Cũng giống như vậy:

@font-face 
{ 
    font-family: 'CenturyGothicRegular'; 
    src: url('/static/fonts/gothic_2-webfont.eot'); 
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'), 
      url('/static/fonts/gothic_2-webfont.woff') format('woff'), 
      url('/static/fonts/gothic_2-webfont.ttf') format('truetype'), 
      url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
... and another for 'CenturyGothicBold' 

Tôi đã sau đó thực hiện các phông chữ chung cho mặc định trang web của tôi trở lại Verdana như vậy:

body 
{ 
    font-family: "CenturyGothicRegular", Verdana; 
    font-size: 14px; 
} 

Và tạo ra một quy tắc nhỏ cho <strong> để thay vì làm cho cân nặng bình thường phiên bản đậm (mà chỉ dường như căng nó), phiên bản trọng lượng đậm sẽ được sử dụng:

strong 
{ 
    font-weight: normal; 
    font-family: 'CenturyGothicBold'; 
} 

Một vấn đề tôi có thể thấy trước đây là nếu các font đã cài đặt sẵn để Verdana, đậm sẽ không b e hiện tại.

Có cách nào để tôi có thể chỉ định một bộ quy tắc mới cho <strong> chỉ áp dụng nếu phông chữ đã được đặt mặc định cho Verdana không?

Answer 1

Không cần phải tìm trình kích hoạt để xem phông chữ thu gọn đã được sử dụng chưa.

Những gì bạn cần làm là đặt font-weight trong quy tắc @font-face, sử dụng cùng một tên gia đình. Vì vậy, bây giờ bạn sẽ gọi nó là CenturyGothic:

@font-face { 
    font-family: 'CenturyGothic'; /* this used to be CenturyGothicRegular */ 
    src: url('/static/fonts/gothic_2-webfont.eot'); 
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/static/fonts/gothic_2-webfont.woff') format('woff'), 
     url('/static/fonts/gothic_2-webfont.ttf') format('truetype'), 
     url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'CenturyGothic'; /* this used to be CenturyGothicBold but the urls still need to point to the files they were pointing at */ 
    src: url('/static/fonts/gothic_2-webfont.eot'); 
    src: url('/static/fonts/gothic_2-webfont.eot?#iefix') format('embedded-opentype'), 
     url('/static/fonts/gothic_2-webfont.woff') format('woff'), 
     url('/static/fonts/gothic_2-webfont.ttf') format('truetype'), 
     url('/static/fonts/gothic_2-webfont.svg#CenturyGothicRegular') format('svg'); 
    font-weight: bold; 
} 

body{ 
    font-family: "CenturyGothic", Verdana; 
    font-size: 14px; 
} 

strong{ 
    font-weight: bold; 
} 

này sẽ kết hợp hai phông chữ thành một font-family cho phép nó hoạt động giống như bất kỳ font-family khác tức là khi bạn thực hiện nó bold nó sẽ hiển thị phiên bản đậm của phông chữ vv

Answer 2

Sử dụng font-weight chỉ với cùng font-family sẽ không hoạt động khi bạn có một vài weight, giống như ánh sáng, siêu nhẹ, đặc đậm, demi đậm, vv