-
Notifications
You must be signed in to change notification settings - Fork 0
Fonts
Font properties specify the family, size, style and color of the font used in the drawing of text in a field.
| Value | 1 Color |
| Initial | transparent |
| Applies To | all fields and managers |
| Percentages | N/A |
Sets the font color of a field.
style {
color: red; /* the font color is set to red */
}
| Value | 1 Dimension small medium large |
| Initial | medium |
| Applies to | all fields and managers |
| Percentages | refer to the normal font size |
Specifies the font size of a field.
If the font size is ‘small’, ‘medium’ or ‘large’, the dimension for the font is specified as 75%, 100% or 150% of the normal font size.
style {
font-size: small; /* the font size is set to 75% of the normal font size */
}
If the font size is a Dimension, this dimension is used as the font size.
style {
font-size: 1cm; /* the font size is set to 1cm */
}
| Value | bold italic underlined |
| Initial | none |
| Applies to | all fields and managers |
| Percentages | N/A |
Specifies the font style of a field.
One or more values can be used to declare a font style.
style {
font-style: italic bold; /* the font style is set to italic and bold*/
}
| Value | 1 font id |
| Initial | none |
| Applies to | all fields and managers |
| Percentages | N/A |
Specifies the name of the font family to use as the font. To import a font to use, please check the documentation.
style {
font-family: BB Sans Alpha; /* the font family is set to BB Sans Alpha*/
}
Besides properties like ‘color’, ‘font-size’ etc., fonts can be declared in a ‘fonts’ block in a stylesheet.
These fonts are declared with an id to reuse them in multiple styles.
A font in the ‘fonts’ block is declared with an id and its properties. The properties used are the same as the regular font properties (see above) without the heading ‘font-’:
fonts {
myFont {
size: small;
style: bold;
color: red;
}
}
A small, red and bold font with the id ‘myFont’ is created
To use a font declared in the ‘fonts’ section a style references the font by using the property ‘font’ and the id of the font:
style {
background: myFont;
}
A style is created which uses the previously declared font ‘myFont’
Alternatively, fonts can be directly declared inside a style:
style {
font {
size: small;
style: bold;
}
}
A style is created which declares and uses an anonymous font
Fonts declared in the ‘fonts’ section can also extend other fonts. All properties from the font to extend are inherited and properties in the extending font are added or overwrite properties from the font to extend:
fonts {
myFont {
size: small;
style: bold;
}
myExtendedFont extends myFont {
style: italic;
color: blue;
}
}
The font ‘myExtendedFont’ extends the font ‘myFont’ thus inheriting all properties of ‘myFont’, overwriting the ‘style’ property and adding its own ‘color’ property