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
How to use font-feature-settings property in CSS?
The font-feature-settings property is used to control the advance typographic features in open type fonts. The advance typographic features like swashes, small caps and the ligatures can be controlled using the font-feature settings property of CSS. The font-feature-settings property is used by passing two different values as listed below −
The first value is the property is used to define the open tyoe feature tags like: "smcp" (small caps), "swsh" (swash). It also has some global values like: "inherit", "initial", and "unset".
The second value that is passed to this property will almost be in the form of binary numbers as: 1 or on, to enable or activate the quoted typography and, 0 or off, for deactivate or disable the quoted typography.
Syntax
The syntax of the font-feature-settings property to enable or disable the typography, is shown below −
font-feature-settings = assign_value;
The value that is by default assigned to the font-feature-settings is normal.
Let us now understand it in details by implementing it practically with the help of code example.
Steps
Step 1 − In the first step of the algorithm, we will define a paragraph <p> element with some dummy text and a class to see the changes on the final output screen.
Step 2 − In the next step, we will grab the paragraph element with its class inside the style tag used inside the head tag of the document structure.
Step 3 − In the final step, we will use the font-feature-settings property with a particular value and then see the changes and result at the output screen.
Example
The below example will explain the practical use of the font-feature-settings property with the complete syntax and changes −
<!DOCTYPE html>
<html>
<head>
<style>
p.result {
font-size: 20px;
font-weight: 600;
text-align: center;
font-feature-settings: "smcp" 4;
}
</style>
</head>
<body>
<h1>Use font-feature-settings property in CSS</h1>
<p class = "result">This is the text, In Which the Changes will reflect.</p>
</body>
</html>
In the above example, we changed the normal text to the small and the capital letters without even using the text-transform property with the capitalize value. We have used the font-feature-settings property with the smcp value to do this.
Let us see one more code example with some different value of the font-feature-settings property and see the changes on the output screen.
Algorithm
The algorithm of the above example and this example is same. You just need to replace the value of the font-feature-settings property value with some other property value and see the changes.
Example
The example below will show how the different values of the font-feature-settings property changes the result visible on the output screen −
<!DOCTYPE html>
<html>
<head>
<style>
p.result {
font-size: 20px;
font-weight: 600;
text-align: center;
font-feature-settings: "swsh"4;
}
</style>
</head>
<body>
<h1>Use font-feature-settings property in CSS</h1>
<p class = "result">This is the text, In Which the Changes will reflect.</p>
</body>
</html>
In this example, we have used the font-feature-settings property value as swsh and see the result and the changes in the text at the output screen.
Conclusion
In this article, we have learnt about the use of the font-feature-settings property with the help of two different code examples. In both of the code examples we have used the different values to assign the font-feature-settings property.
71 Views
