Làm cách nào để chỉ định các thuộc tính phông chữ cho tất cả các thành phần trên trang web html?

126

Khi tôi đặt họ phông chữ, kích thước phông chữ, màu sắc, v.v ... có vẻ như một số thành phần lồng nhau sẽ ghi đè lên chúng bằng các mặc định trình duyệt xấu xí.

Tôi phải thực sự chỉ định hàng chục lần cho bất kỳ loại yếu tố nào trên trang của mình hay có cách nào để đặt chúng trên toàn cầu một lần và mãi mãi không?

Làm thế nào để làm điều đó?

css

— Thành viên tự hào
nguồn

1

Làm thế nào chính xác là bạn hiện đang thiết lập họ phông chữ, kích thước ...?

— thecoop

250

* {
 font-size: 100%;
 font-family: Arial;
}

Dấu hoa thị ngụ ý tất cả các yếu tố.

— Bzzzz
nguồn

15

Điều này hoạt động, nhưng nó không phải là giải pháp tốt nhất. Khi trình duyệt thấy '*', nó lặp lại tất cả các thành phần HTML trong trang và áp dụng CSS cho chúng. Ngay cả đối với các yếu tố mà quy tắc không có ý nghĩa gì. Tùy thuộc vào kích thước của HTML, điều này có thể làm chậm kết xuất trang.

— Cesar Canassa

4

Đồng ý, nhưng nó áp dụng CSS cho TẤT CẢ các yếu tố, như BugAlert đã yêu cầu. Nếu một người muốn thực hiện TẤT CẢ các yếu tố, người ta có thể mong đợi hiệu suất sẽ giảm đi một chút. :)

— Bazzz

1

Bạn cũng có thể thêm! Quan trọng vào cuối mỗi khai báo kiểu để an toàn trước các khai báo kiểu khác vượt trội hơn so với khai báo kiểu này.

— S ..

4

Tôi biết đã 5 năm rồi, nhưng tôi ngạc nhiên không ai nhận ra cho đến bây giờ: bạn không bao giờ nên chỉ định một phông chữ Windows trong "họ phông chữ" (trừ khi tất nhiên đó là một webfont) - Arial, helvetica, sans-serif là nhiều hơn tương thích.

— rob74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}Kế thừa của phông chữ và nếu bạn thực sự muốn tránh ghi đè sử dụng: *,:before,:after{font-family:inherit;}nếu bạn phải sử dụng bộ chọn phổ quát, thay vào đó hãy sử dụng tính kế thừa.

— darcher

18

Nếu bạn đang sử dụng IE, rất có thể nó sẽ trở lại mặc định của trình duyệt đối với các thành phần nhất định, như bảng. Bạn có thể chống lại điều đó bằng một cái gì đó như CSS sau:

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

Chỉnh sửa: bạn có thể muốn đọc lên các bộ CSS; xem chủ đề như thế này

— Paul
nguồn

10

Tôi không thể nhấn mạnh đủ lời khuyên này: sử dụng biểu định kiểu đặt lại, sau đó đặt mọi thứ rõ ràng. Nó sẽ cắt giảm một nửa thời gian phát triển CSS trình duyệt chéo của bạn.

Hãy thử reset.css của Eric Meyer .

— Chris Cox
nguồn

Để sử dụng reset.css này, tôi chỉ cần liên kết biểu định kiểu vào trang của mình hay tôi phải điều chỉnh nó? Về cơ bản tôi cần phải có cùng họ phông chữ và kích thước trên tất cả các trình duyệt chính. Liệu reset.css có giúp tôi làm điều đó theo mặc định không?

— Darth

1

Tôi có xu hướng sao chép và dán nó vào đầu biểu định kiểu của mình thay vì liên kết nó một cách riêng biệt, lưu một yêu cầu HTTP. Nó sẽ giúp bạn thiết lập các kiểu nhất quán trên các trình duyệt vì nó thay đổi mọi thứ: các kiểu duy nhất sẽ là các kiểu mà bạn viết.

— Chris Cox

Cảm ơn! Tôi đã thử nó và nó đã giải quyết hầu hết các vấn đề của tôi. Tuy nhiên, tôi vẫn có thể thấy sự khác biệt về kích thước phông chữ giữa Chrome và Firefox mặc dù thông số kỹ thuật của trang mẫu của tôi giống nhau. Bất cứ ý tưởng về điều này? Ngoài ra, đây có phải là một thực hành tốt?

— Darth

8

bạn có thể đặt chúng trong thẻ body

body
{
    font-size:xxx;
    font-family:yyyy;
}

— jimplode
nguồn

13

Điều này không chính xác vì hầu hết các trình duyệt sẽ không áp dụng phông chữ này cho một số thành phần (các yếu tố sẽ không kế thừa kiểu phông chữ)

— travis-146

@ travis-146 trình duyệt nào? yếu tố nào? bạn biết có một thông số mà tất cả các trình duyệt phải tuân theo.

— Bamieh

@Bamieh một ví dụ cụ thể (thực sự đã đưa tôi đến đây) trên Chrome 72 là nó không áp dụng phông chữ cho văn bản trong một nút hoặc chọn menu.

— Nick Silvestri

2

Nếu bạn chỉ định các thuộc tính CSS cho thành bodyphần của mình, thì nó sẽ áp dụng cho mọi thứ trong <body></body>chừng nào bạn không ghi đè chúng sau này trong biểu định kiểu.

— Điều trị Tyler
nguồn

0

Nếu bạn muốn đặt kiểu của tất cả các thành phần trong cơ thể, bạn nên sử dụng mã tiếp theo ^

  body{
    color: green;
    }

— Stepan Poperechnyi
nguồn