- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is font-family -apple-system?
In CSS, the ‘font-family’ property is used to set the fonts for the text content of the HTML element. It takes the multiple font names as a value. If the browser does not support the first font, it sets the next font style for the HTML element.
Users can follow the syntax below to use the ‘font-family’ CSS property.
font-family: value1, value2, value3, ...
The ‘-apple-system’ value of the ‘font-family’ CSS property allows developers to set the same font for the HTML content of the web page, which the Apple operating system has. It means we can set the fonts according to the user’s device preference.
Syntax
Users can follow the syntax below to use the ‘-apple-system’ font for the ‘font-family’ CSS property.
font-family: -apple-system;
Example 1
In the example below, we have set the ‘-apple-system’ font family for the text content of the HTML element. If you are using an Apple device, you can observe that it sets the same font which is set up for your Apple device’s specification.
<html>
<head>
<style>
.text {
font-size: 1.6rem;
font-family: -apple-system;
color: blue;
}
</style>
</head>
<body>
<h2>Using the <i> -apple-system </i> fonts to set the font according to apple device's font</h2>
<p class = "text"> Welcome to the TutorialsPoint! </p>
</body>
</html>
Example 2
In the example below, we have added the ‘BlinkMacSystemFont’ as a second value of the font-family property for the fallback options. Here, the ‘-apple-system’ value is used for the Firefox and Opera browsers, and ‘BlinkMacSystemFont’ is supported by the Chrome browser. Also, we have used some more fonts as a fallback value. So, ‘font-family’ will select the next font until it finds a font supported by the particular browser.
<html>
<head>
<style>
.text {
font-size: 1.6rem;
font-family: -apple-system, BlinkMacSystemFont, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
color: green;
}
</style>
</head>
<body>
<h2>Using the <i> -apple-system </i> fonts to set the font according to apple device's font</h2>
<p class = "text"> Hey! How are you? </p>
</body>
</html>
Users learned to use the ‘-apple-system’ font family for Apple devices to select the fonts according to the user’s device preference. Also, we have set the fallback fonts if the browser is not able to find the device’s font.
832 Views
