37451 2010-04-12 10:46:00 -0700 Web Inspector: Show Exact Font Being Used 2026-01-12 09:09:31 -0800 1 1 1 Unclassified WebKit Web Inspector 528+ (Nightly build) All All NEW https://bugs.webkit.org/show_bug.cgi?id=146838 https://bugs.webkit.org/show_bug.cgi?id=286608 InRadar P2 Normal --- 1 joepeck webkit-unassigned ap bweinstein cyberskull graouts inspector-bugzilla-changes keishi lars.sonchocky-helldorf mmaxfield pfeldman phiw2 pmuellr rik seiz socket.h syoichi webkit-bug-importer oldest_to_newest 211653 0 joepeck 2010-04-12 10:46:00 -0700 From WebKit Contributors Meeting. 354272 1 cyberskull 2011-02-20 05:43:15 -0800 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, Helvetica, 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(Monaco); The font here is one of the keyword fallbacks, so in this case it shows the fallback in italics. 923087 2 joepeck 2013-08-30 11:03:55 -0700 I think Blink may have done this recently as well: <https://chromium.googlesource.com/chromium/blink/+/a530760b6a7bb4b647e47a1cdcd40e890f2630cb> 1017880 3 ap 2014-06-24 00:21:38 -0700 *** Bug 58079 has been marked as a duplicate of this bug. *** 1017882 4 ap 2014-06-24 00:21:42 -0700 *** Bug 134235 has been marked as a duplicate of this bug. *** 1017883 5 webkit-bug-importer 2014-06-24 00:21:49 -0700 <rdar://problem/17431777> 1188609 6 seiz 2016-04-29 06:41:45 -0700 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. 1188979 7 mmaxfield 2016-04-29 20:30:28 -0700 (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? 1189322 8 phiw2 2016-05-01 22:40:27 -0700 (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;"> test:☲ trigram test letters other ō ā Selecting any of the two , 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 ō ā). 1189557 9 mmaxfield 2016-05-02 16:27:06 -0700 (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;"> > > test:☲ trigram > > test letters other ō ā > > Selecting any of the two , 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. 1189615 10 mmaxfield 2016-05-02 18:42:45 -0700 (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;"> > > > > test:☲ trigram > > > > test letters other ō ā > > > > Selecting any of the two , 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.