bug(badge): Badge doesn't react to the browser font size

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When you change the size of the font through the browser settings. The badges remain the same size.

Comparison images:
small
large
chrome option

### Reproduction

Steps to reproduce:
1. Go in the Chrome options
2. Search for "Font size"
3. Set to "Very small"
4. Go on https://material.angular.io/components/badge/overview
5. Now change to "Very large"
6. Compare again on the doc page

### Expected Behavior

I have a feeling the badges should follow the size of the font.

### Actual Behavior

Badges font remain unchanged between very small or very large font option.

### Environment

- Angular: 16.2.5
- CDK/Material: 16.2.5
- Browser(s): Chrome 116.0.5845.187
- Operating System (e.g. Windows, macOS, Ubuntu): macOS 13.5.2

Bắt đầu bằng cách tái hiện sự cố trên trang tổng quan badge của Material tại material.angular.io/components/badge/overview, sử dụng cài đặt cỡ chữ của Chrome và so sánh «Rất nhỏ» với «Rất lớn». Công việc được xem là hoàn tất khi phông chữ và kích thước của badge phản hồi nhất quán khi cỡ chữ của trình duyệt thay đổi, và hành vi được xác minh ở cả hai cài đặt.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.