In this article, we will see how to implement CSS property “-apple-system” while using multiple values for the font family.
The font-family is a CSS property that specifies a list of one or more font family names for the selected element. As a “fallback” system, the font-family property is able to hold several font names. If in case your browser does not support the first font, it tries the next ones passed in as values.
The font-family names can be further categorized.
- family-name: It is the name of the font family. Example, cursive, “Courier New” etc.
- generic-family: It is a name given to font families that are written after the family name to let the browser pick a similar font from them, in case the specified fonts are not available.
Syntax:
selector {
font-family: 'Courier New', Courier, monospace;
} Approach: Font names containing whitespaces must be enclosed within quotes. Global values for font-family are inherited, initial, revert and unset. Apple’s fonts generally cannot be used on any webpage and are provided in-build in Apple’s product. We can use these fonts on our webpage through CSS. The comparison is shown in the second example by taking two headings with different classes as “one” or “two”.
Example 1: The below example shows the “font-family: -apple-system“
<!DOCTYPE html> <html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
h2 {
height: 5rem;
width: 15rem;
background-color: green;
color: white;
margin: auto;
text-align: center;
margin-top: 2rem;
font-family: -apple-system, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
<br> -apple-system
</h2>
</body>
</html>
|
Output:
Example 2: The below example shows the comparison of “font-family: -apple-system”.
<!DOCTYPE html> <html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
h3 {
height: 2rem;
background-color: green;
color: white;
padding-left: 1rem;
}
.one {
font-family: -apple-system, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
}
.two {
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h3 class=".one">
-apple-system
</h3>
<h3 class=".two">
Courier New
</h3>
</body>
</html>
|
Output:
Note: Internet Explorer and Firefox use “-apple-system;” as font-family whereas Google Chrome uses “BlinkMacSystemFont “