NEW 37451
Web Inspector: Show Exact Font Being Used 
https://bugs.webkit.org/show_bug.cgi?id=37451
Summary Web Inspector: Show Exact Font Being Used
Joseph Pecoraro
Reported 2010-04-12 10:46:00 PDT
From WebKit Contributors Meeting.
Attachments
Add attachment proposed patch, testcase, etc.
Trevor Downs
Comment 1 2011-02-20 05:43:15 PST
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.
Joseph Pecoraro
Comment 2 2013-08-30 11:03:55 PDT
I think Blink may have done this recently as well: <https://chromium.googlesource.com/chromium/blink/+/a530760b6a7bb4b647e47a1cdcd40e890f2630cb>
Alexey Proskuryakov
Comment 3 2014-06-24 00:21:38 PDT
*** Bug 58079 has been marked as a duplicate of this bug. ***
Alexey Proskuryakov
Comment 4 2014-06-24 00:21:42 PDT
*** Bug 134235 has been marked as a duplicate of this bug. ***
Radar WebKit Bug Importer
Comment 5 2014-06-24 00:21:49 PDT
<rdar://problem/17431777>
Stefan Seiz
Comment 6 2016-04-29 06:41:45 PDT
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.
Myles C. Maxfield
Comment 7 2016-04-29 20:30:28 PDT
(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?
Philippe Wittenbergh
Comment 8 2016-05-01 22:40:27 PDT
(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 ō ā).
Myles C. Maxfield
Comment 9 2016-05-02 16:27:06 PDT
(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.
Myles C. Maxfield
Comment 10 2016-05-02 18:42:45 PDT
(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.
Note You need to log in before you can comment on or make changes to this bug.