If I use a -appel-system font stack for my design, I've seen various fonts used depending on the language. So for example, Roman characters are displayed in "San Francisco" and Japanese are displayed in "Hiragino Kaku Gothic Pro"
https://css-tricks.com/snippets/css/system-font-stack/ https://www.quora.com/What-is-the-Mac-OS-X-Japanese-system-font
But what happens if you have mixed text? For example, it is common to write 100 ＋ 人 but that is two different character types, so are there two different fonts? half-width (normal) 100人 full-width (special) １００人 You can see the 100 is shorter than the 人 using regular arabic numbers.
Letters are resolved in font-stack order, where any letter uses whatever font supports it, starting at your first font and going down the list until no fonts can be found, at which point "the system gets to pick something".
In your example, "100" will definitely use SF, but the 人 next to it cannot be found in SF, so Hiragino gets checked to see if it supports that character. It does, and so Hiragino gets used. If the next glyph were, say, some Arameic letter, and you had a font with Arameic support in your stack as well, then SF would fail, Hiragino would fail, and then the Arameic font would succeed. However, it is important to note that browsers don't "keep using one font for as long as possible", they will always try to use "the first font in a stack, falling back to next fonts until they run out of explicit fonts to try".
So, if you had some text "100人.", then the . would get styled by SF again, even though the arameic font would also support it. The browser will try to get back to a "higher font in the stack" as quickly as possible.