The remaining area, at the bottom of the Fonts tab, shows an expandable list of all of the fonts in use on the page. For non-variable fonts the slider ranges from 100 to 900 in increments of 100.Īs you change settings, Firefox applies inline styles to the element to make the changes instantly visible on the page. You can select values using the slider or enter a numeric value directly into the text box. The font-weight for the inspected element. You can select values using the slider or enter a numeric value directly into the text box.Ĭhanging the unit of measure changes the value relative to the font-size setting.Įxample: If the font is 20 pixels high and the line-height is 1.5em, when you change the unit of measure from em to px, the value will become 30px. This can be set using unitless, em, %, or px units. The line-height of the inspected element. If you want to use a different unit such as pt for font-size or line-height, you can set the property value applied to the currently inspected element to use that unit via the rules view, and the font editor will automatically pick it up and make it available in the associated units dropdown menu.Ĭhanging the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained.Įxample: If 1rem is equivalent to 10 pixels, when you change the unit of measurement from rem to px, 2rem becomes 20px. This can be set using em, rem, %, px, vh, or vw units. They are system fallback fonts used when nothing from the font-family CSS declaration has been applied.įirefox 63 adds the Font Editor - a new area below “Fonts used” with additional controls for editing the fonts’ characteristics.įor standard (static) fonts, you will be able to change the settings listed below Size ¶ They are used by a descendant of the inspected element, for example, when it is a container for other elements which have text content with fonts applied.
They are applied to the element as part of the browser’s default styling (Times New Roman for most browsers), and no author-defined font has been supplied. They are listed in the element’s font-family CSS declaration value. Empty elements will not have any fonts used and will display the message “No fonts were found for the current element.”įonts will be included in this section for one of the following reasons: The top section of the Font Editor shows the fonts used by the currently inspected element, grouped by font family.įonts are considered “used” when there is text content in the inspected element that has the font applied to it. In Firefox 61 and 62, this area is labeled “Other fonts in page” and doesn’t include the fonts mentioned in the “Fonts used” section. “All fonts on page” - This section lists all of the fonts in use on the page. In Firefox 61 and 62, this section does not exist. “Fonts used” by the currently inspected element. Select the Fonts tab the last of the tabs shown in the right-hand side of the CSS pane. When it is docked to the right or left sides of the screen, the Fonts tab appears beneath the HTML pane. The Fonts tab is located on the right-hand side of the Page Inspector when it is docked to the bottom of the screen. The updated Font tools as shown in this article are available in Firefox 63 onwards if you are using an older version of Firefox the tools will not look or behave quite the same, but they will be similar (most notably the Font Editor will not be available). Turning on Firefox tests for a new configuration.Getting Set Up To Work On The Firefox Codebase.
0 kommentar(er)
