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 1: / Line 1: @@
-<includeonly><span style="font-size:{{{1}}}">{{{2}}}</span></includeonly><noinclude>
+<includeonly><span style="font-size:{{{1|1em}}}">{{{text|{{{2|}}}}}}</span></includeonly><noinclude>__NOTOC__ [[Category:Formatting Templates]][https://stepmodifications.org/forum/topic/9769-font-color/ '''Forum Topic''']
-== Usage ==
+==Purpose & Usage==
-Following [http://www.w3schools.com/css/css_font.asp CSS Font], this template accepts a value in any of the listed formats.  For example:
+This template is used to change text size.
+{{Alert|text=Always use a 'named' second parameter (text) when using this template to color text that includes an equal ('=') symbol to avoid parser errors.}}
-<pre>
+=== Required Parameters ===
-{{Fs|30px|This is some big text}}
+This template uses 'anonymous' and optionally 'named' parameters, and all are required and must appear in a particular order.
-</pre>
-:{{Fs|30px|This is some big text}}
-<pre>
+<span class="salmontx">'''First Prameter - font size'''</span> - Sets the size of text
-{{Fs|80%|Here's some {{Fs|25px|mixed}} font sizes}}
+: '''Values'''
-</pre>
+:: Any [https://www.w3schools.com/cssref/pr_font_font-size.asp valid CSS font-size] ('rem' or '%' units preferred)
-:{{Fs|80%|Here's some {{Fs|25px|mixed}} font sizes}}
-<includeonly><span style="font-size:{{{1}}}">{{{2}}}</span></includeonly><noinclude>__NOTOC__
+<span class="salmontx">'''Second Prameter - text'''</span> - 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)
-==Purpose & Usage==
+=== Optional Parameters ===
-Use this template to change text size. Following [http://www.w3schools.com/css/css_font.asp CSS Font], this template accepts a value in any of the listed formats.
+Not applicable.
 ==Examples==
 '''Code:'''
-<pre>{{Fs|30px|This is some big text}}</pre>
+<pre>{{Fs|1.5rem|This is 1.5rem font.}}</pre>
+'''Result:''' {{Fs|1.5rem|This is 1.5rem font.}}
+<hr class="my-5">
+'''Code:'''
+<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|1.4rem|font sizes {{Fc|orange|and colors}} }} for various}} applications.
-'''Result:'''
+<hr class="my-5">
-{{Fs|30px|This is some big text}}
 '''Code:'''
-<pre>{{Fs|80%|Here's some {{Fs|25px|mixed}} font sizes}}</pre>
+<pre>{{Fs|large|{{Fc|bright|Font that is larger}} }} than the default site font</pre>
+'''Result:''' {{Fs|large|{{Fc|bright|Font that is larger}} }} than the default site font
+<hr class="my-5">
-'''Result:'''
+'''Code:'''
-{{Fs|80%|Here's some {{Fs|25px|mixed}} font sizes}}
+<pre>{{Fs|1.3rem|text=Use the ''text'' parameter when "=" characters are used.}}</pre>
+'''Result:''' {{Fs|1.3rem|text=Use the ''text'' parameter when "=" characters are used.}}
+<hr class="my-5">
+'''Code:'''
+<pre>{{Fs|1000|Invalid CSS parameters}} don't affect text size.</pre>
+'''Result:''' {{Fs|1000|Invalid CSS parameters}} don't affect text size.
 == See Also ==
 [[:Template:Fc]]
-[[:Template:Indicator]]
 </noinclude>