Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Safari上会有一个莫名其妙的渲染问题 #20

Open
longfeiss opened this issue May 7, 2022 · 8 comments
Open

Safari上会有一个莫名其妙的渲染问题 #20

longfeiss opened this issue May 7, 2022 · 8 comments
Labels
help wanted Extra attention is needed

Comments

@longfeiss
Copy link 

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        @import url('https://cdn.jsdelivr.net/npm/[email protected]/lxgwwenkai-regular.css');

        #wrapper {
            display: flex;
            font-family: 'LXGW WenKai', sans-serif;
        }
/*
        @font-face {
        	font-family: 'LXGW WenKai';
        	src: url('./LXGWWenKai-Regular.ttf');
        }*/
    </style>
</head>

<body>
    <div id="wrapper">
        <h1>
            <a href="/">OK_When_No_Word_Breaks-Breaks</a>
        </h1>
        <h1>
            <a href="/">OK_When_No_Word_Breaks</a>
        </h1>
    </div>
</body>

</html>

image
@longfeiss
Copy link
Author

  • 在chrome上正常
  • 引用本地字体文件，在chrome和safari上都正常
  • 引用其他字体，在chrome和safari上都正常

@longfeiss
Copy link
Author

正常渲染效果如下：
image

@longfeiss
Copy link
Author

这是 Safari 的问题，还是 字体 的问题，能否帮忙看下

@longfeiss
Copy link
Author 

<!DOCTYPE html>
<html>
<head>
<!--     <style>
		@import url('https://rsms.me/inter/inter.css');
		#wrapper {
		  display: flex;
		  font-family: 'Inter var', serif;
		}
    </style> -->
    <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">OK When AGEDFE reaks ssf text SSreaks_sf.
    </div>
</body>

</html>

image

<!DOCTYPE html>
<html>
<head>
    <style>
		@import url('https://rsms.me/inter/inter.css');
		#wrapper {
		  display: flex;
		  font-family: 'Inter var', serif;
		}
    </style>
<!--     <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">OK When AGEDFE reaks ssf text SSreaks_sf.
    </div>
</body>

</html>

image

@chawyehsu chawyehsu added the help wanted Extra attention is needed label May 26, 2022
@chawyehsu
Copy link
Owner

我在 iPhone 上测试移除 display: flex 后不会出现断行。可能是 Safari 的 bug 吧，我也不太清楚。应该不是字体的问题，否则不会只修改这一行才出现不同的表现。

@longfeiss
Copy link
Author

我在 iPhone 上测试移除 display: flex 后不会出现断行。可能是 Safari 的 bug 吧，我也不太清楚。应该不是字体的问题，否则不会只修改这一行才出现不同的表现。

我用本地字体没有问题。
另外可以看下这个 issue queensferryme/hugo-theme-texify#22

@lmm214
Copy link

lmm214 commented Jan 7, 2023

在使用 display: inline-block 上的元素上出现了同样的问题，改为 display: inline-flex 搞定。

@lovelliu
Copy link

lovelliu commented Feb 9, 2023

@justlongfei @chawyehsu flex grid布局加上white-space：no-wrap可以解决换行问题

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@lmm214 @chawyehsu @lovelliu @longfeiss