From WebKit Contributors Meeting.
I was just about to file a bug for this myself. I would like to see in the font list the font in use bolded or otherwise marked as to what is in use. If a fallback is used I think next to the keyword the font should be listed in parentheses and italics. Possibly a lighter color as well? So for example: font-family: mycoolcustomfont, <b>Helvetica</b>, san-serif; Since for whatever reason the first choice was not used and the second choice was, it is bolded to indicate the active typeface. font-family: monotype<i>(Monaco)</i>; The font here is one of the keyword fallbacks, so in this case it shows the fallback in italics.
I think Blink may have done this recently as well: <https://chromium.googlesource.com/chromium/blink/+/a530760b6a7bb4b647e47a1cdcd40e890f2630cb>
*** Bug 58079 has been marked as a duplicate of this bug. ***
*** Bug 134235 has been marked as a duplicate of this bug. ***
<rdar://problem/17431777>
IMHO, this is a much needed feature which both, FF and Chrome have already implemented. Any chance to see this in Safari/Webkit? I second the idea to <bold> the font on the font list. Much preferred to the way e.g. Chrome does it, by displaying it below all the output in the "Computed" Tab.
(In reply to comment #6) > IMHO, this is a much needed feature which both, FF and Chrome have already > implemented. Any chance to see this in Safari/Webkit? > > I second the idea to <bold> the font on the font list. Much preferred to the > way e.g. Chrome does it, by displaying it below all the output in the > "Computed" Tab. This is an interesting idea. In the WebKit inspector, you can only select an entire node at a time. How does it work in other browsers when certain characters in an element fall back to a different font than the rest of the characters?
(In reply to comment #7) > This is an interesting idea. I still like the way Firefox (46) does it, a separate sub tab in the inspector. (Weirdly perhaps, that sub tab does’t seem to exist in Firefox Developer edition and Firefox nightly) > In the WebKit inspector, you can only select an entire node at a time. How > does it work in other browsers when certain characters in an element fall > back to a different font than the rest of the characters? Speaking of Firefox: given this test file: <!doctype html> <body style="font-family: 'Helvetica Neue'; font-size: 2em;"> <p>test:☲ trigram</p> <p style="font-family: Optima, sans-serif">test letters other ō ā</p> Selecting any of the two <p>, the font sub tab shows the two font-family being used. For the 1st para, it shows 'Apple Symbols' and 'Helvetica Neue'; for the second one, it shows 'Optima' and 'Helvetica' (Optima doesn't have glyphs for ō ā).
(In reply to comment #8) > (In reply to comment #7) > > > This is an interesting idea. > > I still like the way Firefox (46) does it, a separate sub tab in the > inspector. > (Weirdly perhaps, that sub tab does’t seem to exist in Firefox Developer > edition and Firefox nightly) > > > In the WebKit inspector, you can only select an entire node at a time. How > > does it work in other browsers when certain characters in an element fall > > back to a different font than the rest of the characters? > > Speaking of Firefox: given this test file: > <!doctype html> > <body style="font-family: 'Helvetica Neue'; font-size: 2em;"> > > <p>test:☲ trigram</p> > > <p style="font-family: Optima, sans-serif">test letters other ō ā</p> > > Selecting any of the two <p>, the font sub tab shows the two font-family > being used. For the 1st para, it shows 'Apple Symbols' and 'Helvetica Neue'; > for the second one, it shows 'Optima' and 'Helvetica' (Optima doesn't have > glyphs for ō ā). Ah, so it just presents the union of all the used fonts in the node. Maybe that idea is enough for us. I'm not sure.
(In reply to comment #9) > (In reply to comment #8) > > (In reply to comment #7) > > > > > This is an interesting idea. > > > > I still like the way Firefox (46) does it, a separate sub tab in the > > inspector. > > (Weirdly perhaps, that sub tab does’t seem to exist in Firefox Developer > > edition and Firefox nightly) > > > > > In the WebKit inspector, you can only select an entire node at a time. How > > > does it work in other browsers when certain characters in an element fall > > > back to a different font than the rest of the characters? > > > > Speaking of Firefox: given this test file: > > <!doctype html> > > <body style="font-family: 'Helvetica Neue'; font-size: 2em;"> > > > > <p>test:☲ trigram</p> > > > > <p style="font-family: Optima, sans-serif">test letters other ō ā</p> > > > > Selecting any of the two <p>, the font sub tab shows the two font-family > > being used. For the 1st para, it shows 'Apple Symbols' and 'Helvetica Neue'; > > for the second one, it shows 'Optima' and 'Helvetica' (Optima doesn't have > > glyphs for ō ā). > > Ah, so it just presents the union of all the used fonts in the node. > > Maybe that idea is enough for us. I'm not sure. I think WebCore should expose something like (in pseudocode) result: [range] struct range { unsigned stringStartIndex unsigned stringEndIndex string font } Then, the web inspector machinery can determine the best way to expose this information to the user.