Template:Fs: Difference between revisions

Latest revision as of 15:55, September 22, 2021

Purpose & Usage

This template is used to change text size.

NOTE

Always use a 'named' second parameter (text) when using this template to color text that includes an equal ('=') symbol to avoid parser errors.

Required Parameters

This template uses 'anonymous' and optionally 'named' parameters, and all are required and must appear in a particular order.

First Prameter - font size - Sets the size of text

Values

Any valid CSS font-size ('rem' or '%' units preferred)

Second Prameter - text - Sets the text to be colored

Values

Free text (this parameter can also be 'named' if the text to be sized includes an equal ('=') symbol)

Optional Parameters

Not applicable.

Examples

Code:

{{Fs|1.5rem|This is 1.5rem font.}}

Result: This is 1.5rem font.

Code:

This shows how {{Fs|80%|users can mix {{Fs|1.4rem|font sizes {{Fc|orange|and colors}} }} for various}} applications.

Result: This shows how users can mix font sizes and colors for various applications.

Code:

{{Fs|large|{{Fc|bright|Font that is larger}} }} than the default site font

Result: Font that is larger than the default site font

Code:

{{Fs|1.3rem|text=Use the ''text'' parameter when "=" characters are used.}}

Result: Use the text parameter when "=" characters are used.

Code:

{{Fs|1000|Invalid CSS parameters}} don't affect text size.

Result: Invalid CSS parameters don't affect text size.

@@ Line 21: / Line 21: @@
 ==Examples==
 '''Code:'''
-<pre>{{Fs|30px|This is 30px font.}}</pre>
+<pre>{{Fs|1.5rem|This is 1.5rem font.}}</pre>
-'''Result:''' {{Fs|30px|This is 30px font.}}
+'''Result:''' {{Fs|1.5rem|This is 1.5rem font.}}
 <hr class="my-5">
 '''Code:'''
-<pre>This shows how {{Fs|80%|users can mix {{Fs|25px|font sizes}} for various applications.}}</pre>
+<pre>This shows how {{Fs|80%|users can mix {{Fs|1.4rem|font sizes {{Fc|orange|and colors}} }} for various}} applications.</pre>
-'''Result:''' This shows how {{Fs|80%|users can mix {{Fs|25px|font sizes}} for various}} applications.
+'''Result:''' This shows how {{Fs|80%|users can mix {{Fs|1.4rem|font sizes {{Fc|orange|and colors}} }} for various}} applications.
 <hr class="my-5">
 '''Code:'''
-<pre>{{Fs|large|Font that is larger}} than the default site font</pre>
+<pre>{{Fs|large|{{Fc|bright|Font that is larger}} }} than the default site font</pre>
-'''Result:''' {{Fs|large|Font that is larger}} than the default site font
+'''Result:''' {{Fs|large|{{Fc|bright|Font that is larger}} }} than the default site font
 <hr class="my-5">
 '''Code:'''
-<pre>{{Fc|green|text=Use the ''text'' parameter when "=" characters are used.}}</pre>
+<pre>{{Fs|1.3rem|text=Use the ''text'' parameter when "=" characters are used.}}</pre>
-'''Result:''' {{Fc|green|text=Use the ''text'' parameter when "=" characters are used.}}
+'''Result:''' {{Fs|1.3rem|text=Use the ''text'' parameter when "=" characters are used.}}
 <hr class="my-5">
 '''Code:'''
-<pre>{{Fc|nonsense|Undefined parameter key words}} don't affect text color.</pre>
+<pre>{{Fs|1000|Invalid CSS parameters}} don't affect text size.</pre>
-'''Result:''' {{Fc|nonsense|Undefined parameter key words }} don't affect text color.
+'''Result:''' {{Fs|1000|Invalid CSS parameters}} don't affect text size.
 == See Also ==