Kaiti.ttc chinese font on iOS vs. Mac

[julienvincenot]

Hi,

I found several older posts explaining this (especially this one ) but I can’t figure out how to make it work on my iPad. I see the “Kaiti SC” font is available in Pages for instance but I guess Apple doesn’t give access to third-party apps.

Anyway, I put the Kaiti.ttc file from my mac, and I tried using the “class=” method from that page, but it still doesn’t work. I’ll copy all my pages (front, back and styling) as well as screenshot of what happens on mac and ipad.

Thanks in advance for your help !

[julienvincenot]

Front template :

(that one is a bit messy, I added a feature to display stroke order with a button)

<div id="hanzi" style='font-family: "Kaiti SC"; font-size: 110px;'>{{Hanzi}}</div>

<div id="hanzi" class=mystyle1>{{Hanzi}}</div>



<center> <div id="target" style='display:none'> </div></center>
<div style='font-family: Hoefler Text; font-size: 40px;'>{{Img-Hanzi}}</div>

<button onclick="showHideStrokeOrder()">Strokes</button>

<div style='font-family: Arial; font-size: 20px;'>{{Img-Hanzi}}</div>

<script type="text/javascript">
	var characters = "{{Hanzi}}".split("")

	var js = document.createElement("script");
	js.type = "text/javascript";
	js.src = "https://cdn.jsdelivr.net/npm/hanzi-writer@2.2/dist/hanzi-writer.min.js";
	js.onload = function() {
		for (x of characters) {
			var writer = HanziWriter.create('target', x, {
				width: 120,
				height: 120,
				padding: 5,   
				showOutline: true,
				strokeAnimationSpeed: 1, 
				delayBetweenStrokes: 150, // milliseconds
				radicalColor: '#ff0000' // blue
			});
			writer.loopCharacterAnimation();
		};
	};
	document.body.appendChild(js);
 
function showHideStrokeOrder() {
        var x = document.getElementById("target");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
			x.style.display = "none";    
        }

		var y = document.getElementById("hanzi");
        if (x.style.display === "block") {
			y.style.display = "none";  
        } else {

			y.style.display = "block";  
        }

    }
</script>

[julienvincenot]

back template :

{{FrontSide}}

<hr id=answer>

<div style='font-family: Hoefler Text; font-size: 70px;'>{{Pinyin}}</div>

<div style='font-family: Hoefler Text; font-size: 65px;'>{{Audio}}</div>

<div style='font-family: Arial; font-size: 20px;'>{{Img-Pinyin}}</div>

<div style='font-family: Hoefler Text; font-size: 55px;'>{{French}}</div>

<div style='font-family: Arial; font-size: 20px;'>{{Img-French}}</div>

<div style='font-family: Hoefler Text; font-size: 40px;'>{{Notes}}</div>

[julienvincenot]

styling :

.card {

font-family: "Kaiti SC";

font-size: 50px;

text-align: center;

color: black;

background-color: white;

}

.card { word-wrap: break-word; }

.win .chinese { font-family: "SCKaiti", "ＭＳ 明朝"; }

.mac .chinese { font-family: "SCKaiti"; }

.linux .chinese { font-family: "SCKaiti", "東風明朝"; }

.mobile .chinese { font-family: "SCKaiti"; }

.ipad .chinese { font-family: "SCKaiti"; }

@font-face {

font-family: myfont;

src: url("Kaiti.ttf");

}

.mystyle1 {

font-family: myfont, "Kaiti SC";

font-size: 110px;

font-style: regular;

}

.chinese { font-size: 50px;}

.reading { font-size: 55px;}

.comment {font-size: 15px; color:grey;}

.tags {color:gray;text-align:right;font-size:10pt;}

.note {color:gray;font-size:12pt;margin-top:20pt;}

.hint {font-size:12pt;}

.answer { background-color:bisque; border:dotted;border-width:1px}

.tone1 {color: #0048ff;}

.tone2 {color: #ebae07;}

.tone3 {color: #07eb35;}

.tone4 {color: #ff0000;}

.tone5 {color: #000000;}

[julienvincenot]

Screenshots to show result on Mac and iOS,

• the confirm the location of Kaiti.ttc in media

[zhushenli]

Do you want the second line?
As a Chinese, I suggest you to stick with 黑体（or 微软雅黑）, that 黑体 is more widely used than 楷体 in printing.

[julienvincenot]

Hi !
I didn’t know those terms, thank you!

I used the top one 黑体 for a long time, but I would like to change to 楷体
because they show better the hooks and stroke pressure.
I want to practice my handwriting so I need more detail to display in AnkiMobile

Do you have any solution to my problem? Thanks !

Julien

[zhushenli]

1. We Chinese don’t learn handwriting by imitate 楷体，it’s too stiff. If you want to learn handwriting, I suggest 田英章’s 田楷（drived from 欧阳询’s 欧楷 from Tang dynasty）.

2. No, I don’t have solution to your problem.

[zhushenli]

【书法】《田英章硬笔楷书入门教学示范》YW-SF-01A_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

[julienvincenot]

Thanks for the links

But I would still like to be able to change to different fonts on AnkiMobile
Any help appreciated !

[dae]

@font-face expects a .ttf file, but you have put a .ttc file in your media folder. Some Googling seems to indicate .ttc can not be used with @font-face, so I’m afraid you would not be able to use that file unless there is some way to convert it to a .ttf file

[julienvincenot]

Thank you Dae, that was exactly the problem. I figured it out yesterday after my post, but I wanted to check it first. It didn’t work immediately, but when doing my reviews this morning I realized the new font is now in place, yessss !

[littlestarman]

Hi julienvincenot,
Just wondering what was your solution? Did you manage to display the correct “Kaiti SC” font in Anki Mobile?
If you could share your solution, that would be very helpful
Cheers!

[julienvincenot]

I’m not sure what i did except perhaps finding a ttf version of that font somewhere online…

So i guess my code above was correct except it needs to refer a .ttf (not .ttc !) file inanki media folder

I don’t have my mac near me, let me know if that works otherwise i’ll take a look later and copy everything