hugo-theme-texify
hugo-theme-texify copied to clipboard
queensferryme
render issues
Thanks for your pretty theme.
There is a render issue when use a different customer font in Safari and mobile.
No problem in Chrome.
custom.css
@import url('https://cdn.jsdelivr.net/npm/[email protected]/style.css');
#wrapper {
font-family: 'LXGW WenKai', "Times New Roman", serif
}
Thanks for your response, it works.
But there are two places are remaining not rendered properly, can you take a look?
The title should be rendered in one line.
Same problem.
@justlongfei
TLDR:
use font-family: 'LXGW WenKai' instead of font-family: 'LXGW WenKai', 'Times New Roman', serif.
Long explanation:
I believe this bug belongs to Safari or LXGW Wenkai. But I don't have the time to dig into the root cause right now.
I can't fix this bug, but you can avoid the bug with font-family: 'LXGW WenKai' instead of font-family: 'LXGW WenKai', 'Times New Roman', serif (somehow, I don't know why).
A minimal reproducible example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url('https://cdn.jsdelivr.net/npm/[email protected]/style.css');
#wrapper {
display: flex;
font-family: 'LXGW WenKai', serif;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>
<a href="/">Any Text with Word-Breaks</a>
</h1>
<h1>
<a href="/">OK_When_No_Word_Breaks</a>
</h1>
</div>
</body>
</html>
Renders like this on Safari:
Renders like this on Safari:
It appears to be some bug introduced by the cdn stylesheet however I did not study this through. To fix, do something like following to the H1 tag, for instance apply flex:auto, to make them share the full width of flex container therefore reduce chances of getting word-wrapped. Its inner a tag natively has no width creates a log of problems among different browsers.
#wrapper {
display: flex;
font-family: 'LXGW WenKai', serif;
background-color: blueviolet;
/* justify-content: space-around; */ /* not needed if inner elements have flex-grow and basis */
/* white-space: nowrap; */ /* result unnecessary overflow */
}
h1:first-of-type {
background-color: lightblue;
}
h1:last-of-type {
background-color: lightgreen;
}
h1 {
flex: auto;
text-align: center;
}
